簡單實用的jQuery分頁插件twbs-pagination

在Web開發中，表格是一個很好展示資料的元件。當資料量大了，分頁就不可避免了。分頁不僅可以提高讀取資料的性能，而且也會讓使用者體驗更好。在前面PHP程式員雷雪松給大家介紹了Bootstrap Table這個插件。Bootstrap Table是內建了表格、分頁、排序和搜尋等功能。如果在特定情況下需要自己定義表格和分頁，那麼分頁就是用jQuery分頁插件twbs-pagination吧！twbs-pagination基于jQuery1.7.0或者更高版本，twbs-pagination可以自定義樣式也可以很好的和bootstrap的分頁元件結合。twbs-pagination的使用方法很簡單。那麼下面雷雪松給大家介紹一個簡單實用的jQuery分頁插件twbs-pagination。

1、定義一個ul或者div的容器

<ul id="pagination" class="pagination-sm"></ul>

2、自定義twb-sPagination配置，并調用

$('#pagination').twbsPagination({

first: '首頁',//首頁

prev: '上一頁',//上一頁

next: '下一頁',//下一頁

last: '末頁',//末頁

totalPages: 35,//總頁數

visiblePages: 7,//顯示的頁碼數

onPageClick: function (event, page) {//點選頁碼觸發的函數

console.log(page);

}

});

3、修改配置，重新生成

var $pagination = $('selector');

var defaultOpts = {

totalPages: 20

};

$pagination.twbsPagination(defaultOpts);

$.ajax({

...,

success: function (data) {

var totalPages = data.newTotalPages;

var currentPage = $pagination.twbsPagination('getCurrentPage');//擷取目前頁面

$pagination.twbsPagination('destroy');//銷毀twbsPagination

$pagination.twbsPagination($.extend({}, defaultOpts, {

startPage: currentPage,

totalPages: totalPages

}));

}

});

來源：簡單實用的jQuery分頁插件twbs-pagination