bootstrap 分頁功能 bootstrap-paginator.js

1.首先要引入jquery，bootstap.js,  bootstrap-paginator.js  三個js

bootstrap-paginator.js 下載地址

鏈接：https://pan.baidu.com/s/1ObU1OX-pkXgJjQlkHJLTfQ 
提取碼：wcqb 

　

2.html

 <div class="row">
        <div class="col-md-12">
            <div class="portlet">
                <ul class="projectAllul"></ul>
                <div style="text-align:center;">
                 
                    <ul id="pageButton"></ul>
                </div>
            </div>
        </div>
    </div>

3.js

$(function () {    
    getPageOfMemo(1);  //初始化頁面

})

// 分頁函數
function getPageOfMemo(page) {

    var pageSize = 15;
    window.userId = $('.UserId', parent.document).text();

    $.ajax({
        url: "#", //你的接口
        data: {
            pageIndex: page,  //頁數
            pageSize: pageSize,  //每頁幾條
            userId: userId,
            status: ''
        },
        dataType: "json",
        async:false,
        success: function (data) {           
            var result = data.rows;
            var strHtml = "";
            for (var i = 0; i < result.length; i++) {
                if (result[i].StartDate != null) {
                    var StartDate = result[i].StartDate.substring(0, 10);
                }
                if (result[i].EndDate != null) {
                    var EndDate = result[i].EndDate.substring(0, 10);
                }
                window.ProjectID = result[i].ProjectID;
                window.ProgressD = result[i].Progress;
                strHtml += `<li>  //這是es6的拼接方法  ``
                                <span class="delProject"  attr="${ProjectID}"><i class="fa fa-trash" title="刪除"></i></span>
                                <div class="ulTop" attr="${ProjectID}" data="${result[i].ProjectName}">
                                    <p class="ulTop-title">${result[i].ProjectName}</p>
                                    <div class="ulTop-canvas">
                                        <canvas id="canvas${ProjectID}"></canvas>
                                    </div>
                                    <p class="ulTop-leading"><span>負責人</span>${result[i].ProjectLeader}</p>
                                    <p><span>開始日期</span>${StartDate}&nbsp;&nbsp;&nbsp;<span>結束日期</span>${EndDate}</p>
                                </div>
                                <div class="ulBtm">              
                                    <i class="fa fa-tasks" title="任務"></i>
                                    <i class="fa fa-bar-chart-o" title="甘特圖"></i>
                                    <i class="fa fa-cubes" title="看板"></i>               
                                    <i class="fa fa-archive" title="文檔"></i>
                                    <i class="fa fa-file-photo-o" title="圖片"></i>
                                    <i class="fa fa-cog" title="設置"></i>
                                </div>
                            </li>`;
            }

            $('.projectAllul').html("");
            $('.projectAllul').html(strHtml);

  
            var totalPages = Math.ceil(data.records / pageSize); //條數除以頁數，是總頁數
            var element = $('#pageButton');  //ul的id
            var options = {
                bootstrapMajorVersion: 3,
                currentPage: page, // 當前頁數
                //numberOfPages: 5, // 顯示按鈕的數量
                totalPages: totalPages, // 總頁數
                itemTexts: function (type, page, current) {
                    switch (type) {
                        case "first":
                            return "首頁";
                        case "prev":
                            return "上一頁";
                        case "next":
                            return "下一頁";
                        case "last":
                            return "末頁";
                        case "page":
                            return page;
                    }
                },
                // 點擊事件，用於通過Ajax來刷新整個list列表
                onPageClicked: function (event, originalEvent, type, page) {
                    getPageOfMemo(page);
                }
            };

            element.bootstrapPaginator(options);
        }
    }
    );
};