bootstrap分頁外掛demo
阿新 • • 發佈:2019-02-03
引入JS 連結:https://pan.baidu.com/s/1NQtcBoJ9iXIHeXiEFjDAWg 密碼:454a
HTML :命名個容器用來裝分頁
<ul id="pagination-demo" class="pagination m--margin-10"></ul>
JS:
// 初始化分頁 var $pagination = $('#pagination-demo'); var defaultOpts = { startPage: 1, totalPages: 1, first: '« 首頁', prev: '‹ 上一頁', next: '下一頁 ›', last: '末頁 »' }; $pagination.twbsPagination(defaultOpts);
var pageIndex = 1; // 第幾頁 function find(){ $.ajax({ }) //重新載入分頁控制元件 var totalPages = res.data.total ? Math.ceil(Number(res.data.total) / res.data.pageSize) : 0; //總共多少頁 var currentPage = $pagination.twbsPagination('getCurrentPage'); //第幾頁 console.log(totalPages, currentPage); $pagination.twbsPagination('destroy'); $pagination.twbsPagination($.extend({}, defaultOpts, { startPage: currentPage, totalPages: totalPages })).on('page', function (evt, page) { console.log("點選回撥事件:" + page); pageIndex = page; //第幾頁 find() }); }