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

        }

      });

    });

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

layui数据表格实现重载数据表格功能(搜索功能）相关推荐

  1. php数据表格的重载,layui数据表格实现重载数据表格功能(搜索功能）

    layui数据表格实现重载数据表格功能,以搜索功能为例 加载数据表格 实现搜索功能和数据表格重载 全部代码 加载数据表格 按照layui官方文档示例 HTML部分 JavaScript部分 var t ...

  2. layui数据表格接口_layui数据表格实现重载数据表格功能(搜索功能）

    layui数据表格实现重载数据表格功能,以搜索功能为例 加载数据表格 实现搜索功能和数据表格重载 全部代码 加载数据表格 按照layui官方文档示例 HTML部分 JavaScript部分 var t ...

  3. 175-路飞16-区间功能搜索功能支付宝支付

    今日内容 1 区间过滤 # 方式一:自己写过滤类,配置到视图类的filter_backends = [自己写的过滤类] # 方式二:借助django-fileter# 1 写一个类:from . im ...

  4. JSD-2204-(业务逻辑开发)-更新订单状态的功能-搜索功能-Quartz-Day12

    1.开发更新订单状态的功能 1.1订单的状态码 我们电商上面订单的状态修改是非常普通的业务 随着商品的购买流程,订单的状态有 状态: 0=未支付 1=已关闭(超时未支付) 2=已取消 3=已支付 4= ...

  5. 搜索功能：洞悉产品的绝佳入口

    提到搜索功能,想必所有人都不会感到陌生.有关搜索功能的文章有很多,它们大多谈论的是搜索的方式,搜索结果的优化等.不过今天我们将从全新的角度来看待搜索,将它作为洞悉产品的绝佳方式,充分利用该功能,能够迅 ...

  6. python discuz搜索api_Django用内置方法实现简单搜索功能的方法

    Model中分别提供了filter方法和icontains方法实现简单的搜索功能. html页面中实现搜索框 模板api_test_manage.html中增加以下内容 {% csrf_token % ...

  7. （转）淘淘商城系列——商品搜索功能表现层实现

    http://blog.csdn.net/yerenyuan_pku/article/details/72913431 首先我们在taotao-search-web工程中需要添加对搜索服务的引用,如下 ...

  8. VUE实现搜索框搜索功能

    实现效果如下: HTML部分:添加搜索框 JavaScript部分: PS:orderlist是订单列表的数据. 参考链接: vue实现搜索功能 vue如何实现搜索功能 以及逻辑 (代码与笔记都粗劣, ...

  9. 在layui中如何选中多条数据重载到表格里

    如何在layui中选中多条数据重载到另一张表格中呢? 看一下效果图,再来讲一下步骤: 我选中上图的三条数据,然后让数据重载到另一张表格里面 上图是回填对应选中的数据,这是怎么实现的呢?请看下面. 主要 ...

最新文章

  1. 一个顽猴沿着一座小山的n级台阶向上跳，猴子上山一步可跳1级或3级，试求上山的n级台阶有多少种不同的爬法。...
  2. 猛增 174K Star！前端最流行的 10 大顶级开源项目！
  3. 数据结构-----基于双数组的Trie树
  4. promise设置多个接口并行调用
  5. PHP常用的自定义函数
  6. IOS UIPageController
  7. 北京大学药学院张亮仁教授/刘振明研究员课题组博士后招聘启事
  8. 面向对象【day07】：新式类和经典类(八)
  9. java8 重复注解_Java8新特性_重复注解与类型注解
  10. 计算机软件毕业论文教师指导记录,【毕业论文指导教师指导记录】论文指导记录16篇...
  11. 宏杉科技助力西安交大二附院：突破存储旧瓶颈、实现业务新成长
  12. 深度学习caffe教程
  13. 持久层框架Hibernate和Mybatis对比
  14. Structs个人适用知识整理
  15. 逐行解析linux kernel NIC驱动
  16. 专业技术计算机应用能力考试ppt2007,全国专业技术人员计算机应用能力考试PPT题库.pdf...
  17. RFID让固定资产盘点更快更准
  18. SQL 查询的分布式执行与调度
  19. java.commen包的一些用法StringUtils.equals()
  20. 关于objectArx /CAD二次开发中“绘制点、线、圆、圆弧、多段线、矩形、文字等”

热门文章

  1. “渐冻症”运动神经元一般情况下会有哪些症状表现呢？
  2. C语言switch选择结构
  3. 机器学习中的多标签分类
  4. php响应微信发送的token验证,ThinkPHP 3.2.3响应微信发送的Token验证失败
  5. python之爬虫爬有道词典
  6. 用shell编写一个计算器，能实现加减乘除
  7. 和平使命-2007中方部队抵达演习区域
  8. RK3588 EVB1蓝牙休眠唤醒调试
  9. 数理统计笔记3：样本方差的抽样分布，两个样本方差比的抽样分布，t统计量的分布
  10. 运算放大器型号特性小总结