1. 程式人生 > >bootstrap分頁外掛demo

bootstrap分頁外掛demo

引入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: '&laquo; 首頁',
    prev: '&lsaquo; 上一頁',
    next: '下一頁 &rsaquo;',
    last: '末頁 &raquo;'
};
$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()
    });
}