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

更新时间：2019年07月27日 11:08:50 作者：安心写bug

这篇文章主要介绍了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
        }
      });
    });

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

您可能感兴趣的文章:

JavaScript 数据结构之字典方法
这篇文章主要介绍了JavaScript 数据结构之字典方法，字典即Dictionary，是一种以键-值对形式存储数据的数据结构，下文更多相关介绍需要的小伙伴可以参考一下
2022-04-04
JS中判断字符串存在和非空的方法
这篇文章给大家分享了JS中判断字符串存在和非空的方法以及相关注意点总结，有兴趣的朋友们参考下。
2018-09-09
JavaScript的arguments对象应用示例
使用特殊对象 arguments，开发者无需明确指出参数名，就能访问它们，下面为大家介绍下其具体的应用
2014-09-09
iScroll中事件点击触发两次解决方案
iScroll是我们在做手机网页中常用的滑动控件之一。单说其功能已相当丰富。但个别时候也是会掉坑的，正好这次就遇上了。在android的app中嵌入网页时不少手机会出现一次点击两次触发的现象。经过一段时间的折腾，总算想到了一个还算合理的解决放案。
2015-03-03
IE6 fixed的完美解决方案
IE7已经支持position:fixed了，而我们的IE6呢？还继续使用js事件？消耗资源，破坏结构，画面闪耀。
2011-03-03
javascript异步编程
如果编程加入了时间的概念就一切变得非常复杂。通常我们的程序是飞快地解析执行，一毫秒紧接着一毫秒，从上至下地执行，这称之为同步。但如果我们想让后台的程序不等前面的程序执行，就执行呢，于是就有了异步的概念。
2010-06-06
一些不错的js函数ajax
创建组件ajax回显等
2008-08-08
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
这篇文章主要介绍了JavaScript中英文字符长度统计方法,涉及javascript针对中英文字符的匹配与运算相关操作技巧,需要的朋友可以参考下
2017-01-01
JS实现自定义状态栏动画文字效果示例
这篇文章主要介绍了JS实现自定义状态栏动画文字效果,涉及javascript结合时间函数动态设置IE状态栏文字显示效果相关操作技巧,需要的朋友可以参考下
2017-10-10
再谈javascript常见错误及解决方法
下面小编就为大家带来一篇再谈javascript常见错误及解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-09-09