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

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

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

加载数据表格

按照layui官方文档示例

HTML部分

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

JavaScript部分

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

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

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部分代码如下：

// 执行搜索，表格重载
  $(\'#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部分

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

JavaScript部分

// 加载表格
  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
        }
      });
    });

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