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


Posted in Javascript onJuly 27, 2019

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(AJAX)解析XML的代码(兼容FIREFOX/IE)
Jul 11 Javascript
js中巧用cssText属性批量操作样式
Mar 13 Javascript
JS多物体 任意值 链式 缓冲运动
Aug 10 Javascript
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
JS实现在网页中弹出一个输入框的方法
Mar 03 Javascript
JS双击变input框批量修改内容
Dec 12 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
浅谈 vue 中的 watcher
Dec 04 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 Javascript
Vue常见面试题整理【值得收藏】
Sep 20 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
Feb 08 Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 Javascript
layui表格数据重载
Jul 27 #Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 #Javascript
微信小程序 如何获取网络状态
Jul 26 #Javascript
layui使用数据表格实现购物车功能
Jul 26 #Javascript
layui实现数据表格点击搜索功能
Mar 26 #Javascript
vue eslint简要配置教程详解
Jul 26 #Javascript
vue移动端城市三级联动组件使用详解
Jul 26 #Javascript
You might like
一个简单的PHP&amp;MYSQL留言板源码
2020/07/19 PHP
浅谈PHP强制类型转换,慎用!
2013/06/06 PHP
php中hashtable实现示例分享
2014/02/13 PHP
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
Ionic默认的Tabs模板使用实例
2016/08/29 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
2017/10/30 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
python绘制漏斗图步骤详解
2019/03/04 Python
Python中调用其他程序的方式详解
2019/08/06 Python
3种python调用其他脚本的方法
2020/01/06 Python
python对Excel的读取的示例代码
2020/02/14 Python
深入浅析css3 中display box使用方法
2015/11/25 HTML / CSS
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
加拿大最大的体育用品、鞋类和服装零售商:Sport Chek
2018/11/29 全球购物
儿科主治医生个人求职信
2013/09/23 职场文书
职称评定自我鉴定
2014/03/18 职场文书
超越自我演讲稿
2014/05/21 职场文书
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
学校食堂食品安全承诺书
2015/04/29 职场文书
社区安置帮教工作总结2015
2015/05/20 职场文书
法律意见书范文
2015/05/20 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书