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);
        }
    }
    );
};