浅谈layui框架自带分页和表格重载的接口解析问题
首先要了解框架分页自带的参数有哪些,特别是注意参数名称要和后台一致!
**表格重载(头部搜索功能):通过传入的日期来搜索请求后台查询出数据
//搜索查询 var active = { reload: function(){ var date_s = $('#date_s').val(); //传入搜索的日期值 //执行重载 table.reload('重载表格id', { url : '搜索请求接口', method:'请求类型', page: { curr: 1 //重新从第 1 页开始 } ,where: { //类似于 data beginDate:date_s //传入日期参数 } }); } }; $('#rechar_btn').on('click', function(){ var type = $(this).data('type'); //不能为空验证 if( $('#date_s').val()==""){ layer.msg('查询起始日期不能为空'); return false; } active[type] ? active[type].call(this) : ''; });
特别要注意的是执行表格重载时,点击的按钮btn最好不要用button或者input(容易入坑)否则点击搜索时页面会刷新,接口会提交两次,把 button 换成 div 就会避免这个问题。
类似于:
<button class="layui-btn" data-type="reload" lay-filter="rechar_btn" id="rechar_btn" >搜索</button>
换成 div
<div class="layui-btn" data-type="reload" lay-filter="rechar_btn" id="rechar_btn" >搜索</div>
最后说一下:分页也支持回调----看文档里的-切换分页的回调
laypage.render({ elem: 'test1' ,count: 70 //数据总数,从服务端得到 ,jump: function(obj, first){ //obj包含了当前分页的所有参数,比如: console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。 console.log(obj.limit); //得到每页显示的条数 //首次不执行 if(!first){ //do something } } });
都是项目里遇到的一些小问题,顺手写一笔,如果各位大神不巧看到这里还请大家多多提点意见和建议,大家多多沟通和分享~
以上这篇浅谈layui框架自带分页和表格重载的接口解析问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持来客网。