当前位置： 移动技术网 > IT编程>网页制作>Html5 > 前端paging分页，前端设置每页多少条和当前页面的索引，传给后端，数据显示出来

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

2018年12月12日  | 移动技术网IT编程  | 我要评论

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 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网