前端paging分页，前端设置每页多少条和当前页面的索引，传给后端，数据显示出来

1.首先引入jquery

2.在引入paging.css和paging.js  这2个我存在百度云上：

链接：https://pan.baidu.com/s/1SPxlBkkx-pNAtLuRLifEag
提取码：pwr4
3.根据后台接口获取数据的总条数，由于我是tab切换。每个tab都需要分页,所以我把分页的函数提成一个公共的函数

                var records = category.varient.records;  //tab1总行数
                var records1 = category.molecularprofiles.records;//tab2总行数
                var records2 = category.evidence.records;//tab3总行数

           //公共分页函数
                function publicPage(x, y, z,d) {  x是命名，y是div分页的id，z是总条数，d是调取函数的名字
                    var x = new Paging();
                    x.init({
                        target: y,
                        pagesize: 50,  //每页的条数
                        count: z,
                        current: 1,
                        //toolbar: true,                       
                        callback: function (pagecount, size) {
                            if (pagecount > 1) {
                                d(pagecount, size);
                            }

                        }
                    })
                }

                publicPage('page', $('#pageTool'), records, varients);
                publicPage('page1', $('#pageTool1'), records1, Molecularprofiles);
                publicPage('page2', $('#pageTool2'), records2, Evidence);      

下面列出一个函数的分页例子

//varient 分页
function varients(pagecount, size) {
    $.ajax({
        url: '/KnowledgeBase/KnowledgeBase/GetVariantsByGeneID',
        data: {
            geneID: attrParam,
            PageIndex: pagecount,
            PageSize: size,
        },
        dataType: 'JSON',
        async: true,
        success: function (data) {
            records = data.data.records;
            if (data.state == "success") {
                var rowp = data.data.rows;
                var strHtml = "";
                for (var i = 0; i < rowp.length; i++) {
                    if (i % 2 == 0) {
                        strHtml += "    <tr role='row' class='odd'>";
                    } else {
                        strHtml += "    <tr role='row' class='even'>";
                    }
                    strHtml += "        <td class='sorting_1'>";
                    strHtml += "             <a href='javascript:;' class='btn btn-default btn-gene-variant' onclick=geneVariant()>" + rowp[i].Variant + "</a>";
                    strHtml += "        </td>";
                    strHtml += "        <td>" + rowp[i].Impact + "</td>";
                    strHtml += "        <td>" + rowp[i].ProteinEffect + "</td>";
                    strHtml += "        <td>" + rowp[i].Description + "</td>";
                    strHtml += "        <td>" + rowp[i].DrugResistance + "</td>";
                    strHtml += "     </tr>";

                }
                $("#varients").html("")
                $("#varients").html(strHtml);//将数据增加到页面中
            }

        }
    })
}

把每页的数据循环出来。

大功告成！

分页的图片demo:

如果实在还是不懂，网上下载了一个例子，可参考，百度云地址：

链接：https://pan.baidu.com/s/19t3bfHv0C2KW0yjVEmycMg 
提取码：ilij