最近在使用layui+larave做项目,需要使用到table的分页+搜索的功能,一开始没有什么思路,从网上找了几个,用在自己这里并不正确,不知是自己有哪里写错了,还是这几个是不正确,下面是自己亲自试验过的,并且已经实现过了。
代码如下:
其中需要加载的插件请自行加载,此处需要加载的是 table(表格)组件和form(表单)组件
js代码
/**
* 页面的数据渲染
*/
table.render({
elem:"#bizList"
, id: 'bizList'
, method: 'get'
, url: biz_url // 获取数据的url链接
, headers: {
type: 'list', // 这是自己用来做判断的,根据自己的需求进行添加
isAjax: 'ajax'
}
, page: ({
layout:['prev', 'page', 'next', 'count']
, first: '首页'
, last: '尾页'
, curr: 1
, groups: 6
})
, cols:[[
{title: '商户名称', field: 'biz_name', fixed: 'left'}
, {title: '商户分类', field: 'category'}
, {title: '联系地址', field: 'address'}
, {title: '联系电话', field: 'tel'}
, {title: '联系人', field: 'truename'}
, {title: '用户名', field: 'username'}
, {title: '操作', toolbar: "#operation", fixed: 'right'}
]]
, limit: 40
, event: true
});
/**
* 表格的搜索功能
* 需要使用到数据表格的重载功能
*/
form.on('submit(searche_btn)', function (data) {
/**
* 数据表格的重载功能
*/
table.reload('bizList', {
method: 'get'
, where: {
biz_name: data.field['biz_name'] // 添加查询的参数
}
, page: {
curr: 1 // 重载后从第一页开始
}
});
return false; // 阻止submit的表单提交
});
这是form表单的html代码以及table表格的html代码
<form class="layui-form" action="">
<div class="layui-form-item">
<div class="layui-input-inline">
<input type="text" name="biz_name" required lay-verify="required" placeholder="请输入商户名称" autocomplete="off" class="layui-input">
</div>
<button class="layui-btn" id="search" lay-submit lay-filter="searche_btn">搜索</button>
</div>
</form>
<table id="bizList" lay-filter="bizList" data-url="{{ url('biz/list') }}">
<!-- 这是动态生成操作按钮的模板,根据需要自行更改 -->
<script id="operation" type="text/html">
<div class="layui-btn-container">
<button lay-event="info" class="layui-btn">查看详情</button>
@{{# if(d.enabled === 1) { }} // 这是layui的laytpl模板的使用方法
<button lay-event="enabled" class="layui-btn layui-bg-red">禁用</button>
@{{# } }}
@{{# if(d.enabled === 0){ }}
<button lay-event="enable" class="layui-btn">启用</button>
@{{# } }}
</div>
</script>
</table>
在此处如果又遇到什么问题,欢迎大家已进行讨论。
上面的代码,只是实现了搜索+分页的功能,如需其他的功能需要自行寻找其他的思路。