首先要知道帧分页中包含哪些参数,尤其注意参数名称要与背景一致!
* *需要注意layui框架的数据解析格式。数据必须是数组对象的形式才能正常解析,否则会很麻烦(预先测试的异常解析,手动手写js,动态添加表)
数据格式,例如:
{'count' : 11,' code' : 0,' msg' : '',' data' : [{'id' :' 1 ',' money' : 20,' top type' :' online ',' '汇款id': 1 ',img': ' ',datetime ' : ' 2018-08-01 16:01:09 ',' accountid': 'wyp666 ',' statusid': 'P05 ',Orderid' :' 2 ',' userid' :' wdm123456 ',' audit time ' 3360 ' 2018-07-07此时,可以通过框架的分页属性直接设置显示的页码和页数,而无需将这两个参数通过数据传输到后台;如果页面没有传输,将默认为第一页;
例如:
table . render({ elem : ' # detail ',url:' background interface ',method:' request method ',cellminwidth336095,page :){//支持传入laypage组件的所有参数(某些参数除外,例如jump/elem)-参见文档layout 3360[' limit ',' count ',' prev ',' page ',' next ',' skip ']//自定义分页布局//,curr 3360 5//最初设置在第5页。Groups: 1 //只显示一个连续页码,first: false //不显示第一页,last 3360 false//不显示最后一页},resize: false,//禁止拖放td框,默认值为false。您可以拖放limit :[10,15,20,25],//在这里,您可以选择每页显示的文章数量,limit: 10。//在这里,可以设置每页显示多少个id :表单ID’,以及cols: [[..]]如下:
* *表重载(表头搜索功能):通过进入日期在后台搜索数据
//搜索查询varactive={ reload : function(){ vardate _ s=$(' # date _ s ')。val();//传入搜索的日期值//重载table.reload('重载表id ',{url : '搜索请求接口',method: '请求类型',page : { curr 3360 1//再次从第1页开始},其中: {//类似于databegindate 3333。} };$('#rechar_btn ')。on('click '),function(){ var type=$(this)。数据(' type ');//无法验证是否($ ('# date _ s ')。val ()=='') {layer.msg('查询开始日期不能为空');返回false}活动[类型]?活动[类型]。拨打(此):“”;});需要特别注意的是,在重新加载表格时,最好不要在点击搜索时使用按钮或输入(容易入坑),否则会刷新页面并提交两次界面,所以用div替换按钮可以避免这个问题。
类似于:
button class=' layui-BTN ' data-type=' reload ' lay-filter=' rechar _ BTN ' id=' rechar _ BTN '搜索/带div的按钮
div class=' layui-BTN ' data-type=' reload ' lay-filter=' rechar _ BTN ' id=' rechar _ BTN ' search/div最后,分页还支持回调——看看文档中切换分页的回调
lay page . render({ elem : ' test1 ',count : 70//总数据,从服务器获取,jump3360函数(obj,first) {//obj包含当前分页的所有参数,如console . log(obj . curr);//获取当前页面,以便向服务器请求相应页面的数据。console . log(obj . limit);//获取每页显示的项目数//不要执行if(!第一){//做某事} } });都是项目中遇到的小问题,请大家写个条子。如果碰巧看到这里,请多提意见和建议,多交流分享~
以上关于layui框架中分页和表重载的接口分析的讨论,都是边肖和大家分享的内容,希望能给大家一个参考和支持。