脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → layui数据表格实现重载数据表格功能

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
        }
      });
    });

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

您可能感兴趣的文章:

相关文章

  • 解决IE6的PNG透明JS插件使用介绍

    解决IE6的PNG透明JS插件使用介绍

    IE6的PNG透明是个老问题了，最近有朋友问我有没有最好的解决这个问题的插件，今天抽空把这个发上来
    2013-04-04
  • 深入理解JavaScript中的宏任务和微任务机制

    深入理解JavaScript中的宏任务和微任务机制

    JavaScript中的任务分为宏任务和微任务，它们的执行顺序会影响代码的执行结果。了解它们的机制可以帮助我们更好地理解事件循环和异步编程，避免出现一些意想不到的错误
    2023-05-05
  • js es6系列教程 - 基于new.target属性与es5改造es6的类语法

    js es6系列教程 - 基于new.target属性与es5改造es6的类语法

    下面小编就为大家带来一篇js es6系列教程 - 基于new.target属性与es5改造es6的类语法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • JAVASCRIPT下判断IE与FF的比较简单的方式

    JAVASCRIPT下判断IE与FF的比较简单的方式

    在JAVASCRIPT当中可以通过取当前浏览器返回值来判断当前使用什么浏览器。
    2008-10-10
  • 再论Javascript的类继承

    再论Javascript的类继承

    说到Javascript的类继承，就必然离不开原型链，但只通过原型链实现的继承有着不少缺陷。
    2011-03-03
  • JavaScript SHA-256加密算法详细代码

    JavaScript SHA-256加密算法详细代码

    这篇文章主要为大家详细介绍了JavaScript SHA-256加密算法代码，具有一定的参考价值，感兴趣的朋友可以参考一下
    2016-10-10
  • js实现超酷的照片墙展示效果图附源码下载

    js实现超酷的照片墙展示效果图附源码下载

    这篇文章主要介绍了超酷的照片墙展示效果图附源码下载的相关资料,需要的朋友可以参考下
    2015-10-10
  • javascript 闭包详解

    javascript 闭包详解

    闭包：是指有权访问另外一个函数作用域中的变量的函数。创建闭包的常见方式就是在一个函数内部创建另外一个函数。在javascript中没有块级作用域，一般为了给某个函数申明一些只有该函数才能使用的局部变量时，我们就会用到闭包，我们来详细探讨下
    2015-07-07
  • JavaScript单例模式实现自定义弹框

    JavaScript单例模式实现自定义弹框

    这篇文章主要为大家详细介绍了JavaScript单例模式实现自定义弹框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-10-10
  • JavaScript实现JSON合并操作示例【递归深度合并】

    JavaScript实现JSON合并操作示例【递归深度合并】

    这篇文章主要介绍了JavaScript实现JSON合并操作,结合实例形式分析了javascript基于递归深度实现json合并操作相关实现技巧与注意事项,需要的朋友可以参考下
    2018-09-09

最新评论