基於bootstrap的分頁外掛程式bootstrap-paginator

項目中用到了分頁，花費了些時間才弄完，總結出來，希望能讓大家少走彎路。資料庫是mysql，用到了mysql的limit start,len

首先下載：bootstrap-paginator的js外掛程式，地址：

然後在頁面中:

<div id="pagination" ></div>var options = {        currentPage: 1,//              totalPages :10,                             itemContainerClass: function (type, page, current) {            return (page === current) ? "active" : "pointer-cursor";        },        itemTexts: function (type, page, current) {            switch (type) {            case "first":                return "首頁";            case "prev":                return "前一頁";            case "next":                return "下一頁";            case "last":                return "末頁";            case "page":                return page;            }        },        onPageClicked: function(e,originalEvent,type,page){            e.stopImmediatePropagation();            var currentTarget = $(e.currentTarget);            var pages = currentTarget.bootstrapPaginator("getPages");            // Ajax calling            setTableData(page);            currentTarget.bootstrapPaginator("show",page);            updatePagesInfo($("#totalRecord").val(), page);        },        pageUrl: function(type, page, current){            return "#";        }    };$('#pagination').bootstrapPaginator(options);

options中的數值是可以動態設定的，如要根據查詢條件或去總的記錄數，options.totalPages = 20,

效果如下：