Layui中Table与Page联用：搜索条件和分页参数传递步骤揭秘

在layui中，table和page一起使用时，可以通过以下步骤传递搜索条件和分页参数： 1. 引入layui的CSS和JS文件： ```html <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.min.css"> <script src="https://cdn.staticfile.org/layui/2.5.7/layui.min.js"></script> ``` 2. 创建一个表格容器和一个分页容器： ```html <table id="demo" lay-filter="test"></table> <div id="pagination"></div> ``` 3. 编写JavaScript代码，初始化表格和分页： ```javascript layui.use(['table', 'laypage'], function(){ var table = layui.table; var laypage = layui.laypage; //执行一个laypage实例 laypage.render({ elem: 'pagination' //注意，这里的 pagination 是 ID，不用加 # 号 ,count: 100 //数据总数，从服务端得到 ,limit: 10 //每页显示的条数 ,jump: function(obj, first){ //obj包含了当前分页的所有参数，比如： console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。 console.log(obj.limit); //得到每页显示的条数 //首次不执行 if(!first){ //do something } } }); //监听行工具事件 table.on('tool(test)', function(obj){ var data = obj.data; //console.log(obj) }); //执行渲染 table.render({ elem: '#demo' ,url: '/path/to/your/data' //数据接口 ,cols: [[ //表头 {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'} ,{field: 'username', title: '用户名', width:80} ,{field: 'email', title: '邮箱', width:180} ,{field: 'phone', title: '手机', width:180} ,{field: 'createTime', title: '创建时间', width: 200, sort: true} ,{field: 'updateTime', title: '更新时间', width: 200, sort: true} ,{fixed: 'right', title:'操作', toolbar: '#barDemo'} ]] ,page: true //开启分页 ,limit: 10 //每页显示10条数据 ,limits: [10, 20, 30, 40] //每页显示数据量可选值 ,where: { //自定义查询条件 key: 'value' } }); }); ``` 在这个例子中，我们首先引入了layui的CSS和JS文件，然后创建了一个表格容器和一个分页容器。接下来，我们使用layui的`table`和`laypage`模块初始化表格和分页。在`laypage`的`jump`函数中，我们可以获取到当前页和每页显示的条数，从而向服务端请求对应页的数据。在`table.render`方法中，我们设置了数据接口、表头、分页等信息，其中`where`字段用于自定义查询条件。 ######[AI写代码神器 | 845点数解答 | 2024-05-23 13:52:45]