layui数据表格实现重载数据表格功能(搜索功能）

这篇文章主要介绍了layui数据表格实现重载数据表格功能，以搜索功能为例进行讲解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

layui数据表格实现重载数据表格功能，以搜索功能为例

• 加载数据表格
• 实现搜索功能和数据表格重载
• 全部代码

加载数据表格

按照layui官方文档示例

HTML部分

1	<table id="demo" lay-filter="test"></table>

JavaScript部分

1 2 3 4 5 6 7 8 9

var table = layui.table;    //执行渲染 table.render({  elem: '#demo' //指定原始表格元素选择器（推荐id选择器）  ,height: 315 //容器高度  ,cols: [{}] //设置表头  //,…… //更多参数参考右侧目录：基本参数选项 });

官方的文档已经把方法说的很明白了，下面展示实例用法（HTML部分依照官方文档，不用修改）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

layui.use('table', function () {     var table = layui.table;     table.render({       // 表格容器ID       elem: '#ware_info'       // 表格ID，必须设置，重载部分需要用到       , id: 'tableOne'       // 数据接口链接       , url: "异步请求数据接口地址"       // 附加参数，post token       , where: {'token': token}       , method: 'post'       // 分页 curr起始页，groups连续显示的页码，默认每页显示的条数       , page: {         layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']         , curr: 1         , groups: 6         , limit: 20       }       , cols: [[         {fixed: 'lift', title: '序号', type: 'numbers', minWidth: 60, align: 'center',}         , {field: 'part', title: '类型', align: 'center', width: 120}         , {field: 'uid', title: 'UID', align: 'center', width: 200, sort: true, event: 'details', style: 'color: #0066CC; cursor:pointer;'}         , {field: 'quantity', title: '数量', width: 120, align: 'center', event: 'setNumber', style: 'color: #0066CC; cursor:pointer;'}         , {field: 'description', title: '描述', align: 'center', minWidth: 80}         , {field: 'disable', title: '状态', sort: true, width: 80, align: 'center',}       ]]     });   });

实现搜索功能和数据表格重载

1、接口需求
需要有一个可以接收搜索条件并返回固定格式json文件的数据接口。

2、注意要提前导入layui的依赖模块

JavaScript部分代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// 执行搜索，表格重载   $('#do_search').on('click', function () {     // 搜索条件     var send_name = $('#send_name').val();     var send_data = $('#send_data').val();     table.reload('tableOne', {       method: 'post'       , where: {         'token': token,         'send_name': send_name,         'send_data': send_data,       }       , page: {         curr: 1       }     });   });

全部代码

HTML部分

1	<table class="layui-hide" id="ware_info" lay-filter="tableOne"></table>

JavaScript部分

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

// 加载表格   layui.use('table', function () {     var table = layui.table;     table.render({       // 表格容器ID       elem: '#ware_info'       // 表格ID，必须设置，重载部分需要用到       , id: 'tableOne'       // 数据接口链接       , url: "你的异步数据接口地址"       // 附加参数，post token       , where: {'token': token}       , method: 'post'       // 分页 curr起始页，groups连续显示的页码，默认每页显示的条数       , page: {         layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']         , curr: 1         , groups: 6         , limit: 20       }       , cols: [[         {fixed: 'lift', title: '序号', type: 'numbers', minWidth: 60, align: 'center',}         , {field: 'part', title: '类型', align: 'center', width: 120}         , {field: 'uid', title: 'UID', align: 'center', width: 200, sort: true, event: 'details', style: 'color: #0066CC; cursor:pointer;'}         , {field: 'quantity', title: '数量', width: 120, align: 'center', event: 'setNumber', style: 'color: #0066CC; cursor:pointer;'}         , {field: 'description', title: '描述', align: 'center', minWidth: 80}         , {field: 'disable', title: '状态', sort: true, width: 80, align: 'center',}       ]]     });     // 执行搜索，表格重载     $('#do_search').on('click', function () {       // 搜索条件       var send_name = $('#send_name').val();       var send_data = $('#send_data').val();       table.reload('tableOne', {         method: 'post'         , where: {           'csrfmiddlewaretoken': token,           'send_name': send_name,           'send_data': send_data,         }         , page: {           curr: 1         }       });     });

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。