前端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