ASP.NET – Sử dụng kiểu phân trang Bootstrap trong Gridview


18/3/17      
Bootstrap là một tập hợp các công cụ miễn phí để tạo các trang web và các ứng dụng web. Nó chứa HTML và các mẫu thiết kế dựa trên CSS bao gồm chữ, biểu mẫu, nút, thanh điều hướng và các thành phần về giao diện. 
Nó có thành phần phân trang đơn giản và đẹp như hình ở dưới.


Có một vấn đề khi bạn muốn áp dụng thành phần này vào phân trang của ASP.NET Gridview bởi vì sự khác biệt về bố cục trong việc sử dụng Bootstrap và Gridview khi phân trang. Bạn có thể xem sự khác nhau trong hình dưới đây.

Bootstrap : ul (class pagination) — li — a
Gridview : tr (class pagination) — td — table — tbody — tr — td — span / a
Do đó, tôi thêm đoạn mã CSS vào trong tập tin bootstrap css như sau:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
.pagination-ys {
    /*display: inline-block;*/
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}
.pagination-ys table > tbody > tr > td {
    display: inline;
}
.pagination-ys table > tbody > tr > td > a,
.pagination-ys table > tbody > tr > td > span {
    position: relative;
    float: left;
    padding: 8px 12px;
    line-height: 1.42857143;
    text-decoration: none;
    color: #dd4814;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    margin-left: -1px;
}
.pagination-ys table > tbody > tr > td > span {
    position: relative;
    float: left;
    padding: 8px 12px;
    line-height: 1.42857143;
    text-decoration: none;   
    margin-left: -1px;
    z-index: 2;
    color: #aea79f;
    background-color: #f5f5f5;
    border-color: #dddddd;
    cursor: default;
}
.pagination-ys table > tbody > tr > td:first-child > a,
.pagination-ys table > tbody > tr > td:first-child > span {
    margin-left: 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}
.pagination-ys table > tbody > tr > td:last-child > a,
.pagination-ys table > tbody > tr > td:last-child > span {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}
.pagination-ys table > tbody > tr > td > a:hover,
.pagination-ys table > tbody > tr > td > span:hover,
.pagination-ys table > tbody > tr > td > a:focus,
.pagination-ys table > tbody > tr > td > span:focus {
    color: #97310e;
    background-color: #eeeeee;
    border-color: #dddddd;
}
*ys là tiền tố tự đặt 😀
Khi bạn muốn dùng nó trong Gridview thì chỉnh thẻ Pager Style như sau:
<PagerStyle CssClass="pagination-ys" />

Không có nhận xét nào:

Đăng nhận xét

Giới thiệu

Website hướng dẫn các thủ thuật, cách cài đặt, cấu hình các phần mềm. Các thông tin công nghệ và hướng dẫn lập trình...

facebook.com/dung.phamtrung.9

phamtrungdung@gmail.com

Copyright © 2016. Cách cài đặt. Ghi rõ nguồn khi lấy tin từ trang này