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: \'/Knowledge /Knowledge /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=\' :;\' class=\'btn btn-default btn-gene-variant\'  =geneVariant()>\" + rowp[i].Variant + \"</a>\";
                    strHtml += \"        </td>\";
                    strHtml += \"        <td>\" + rowp[i].Impact + \"</td>\";
                    strHtml += \"        <td>\" + rowp[i].ProteinEffect + \"</td>\";
                    strHtml += \"        <td>\" + rowp[i].De ion + \"</td>\";
                    strHtml += \"        <td>\" + rowp[i].DrugResistance + \"</td>\";
                    strHtml += \"     </tr>\";

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

        }
    })
}

把每页的数据循环出来。

大功告成!

分页的图片demo:

\"\"

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

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

收藏 打印