前端paging分页,前端设置每页多少条和当前页面的索引,传给后端,数据显示出来
程序员文章站
2022-06-17 20:56:34
1.首先引入jquery 2.在引入paging.css和paging.js 这2个我存在百度云上: 链接:https://pan.baidu.com/s/1SPxlBkkx-pNAtLuRLifEag 提取码:pwr4 3.根据后台接口获取数据的总条数,由于我是tab切换。每个tab都需要分页,所 ......
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
上一篇: 取譬说理,循循善诱:是孟子的论辩艺术之一
下一篇: PHP生成随机密码的4种方法实例讲解