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

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" />