php数据表格的重载,layui数据表格实现重载数据表格功能(搜索功能)
layui数据表格实现重载数据表格功能,以搜索功能为例
加载数据表格
实现搜索功能和数据表格重载
全部代码
加载数据表格
按照layui官方文档示例
HTML部分
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部分
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
}
});
});
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
php数据表格的重载,layui数据表格实现重载数据表格功能(搜索功能)相关推荐
- layui数据表格接口_layui数据表格实现重载数据表格功能(搜索功能)
layui数据表格实现重载数据表格功能,以搜索功能为例 加载数据表格 实现搜索功能和数据表格重载 全部代码 加载数据表格 按照layui官方文档示例 HTML部分 JavaScript部分 var t ...
- layui数据表格实现重载数据表格功能(搜索功能)
这篇文章主要介绍了layui数据表格实现重载数据表格功能,以搜索功能为例进行讲解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 layui数据表格实现重载数据表格功能,以搜索功能为例 加载数据表格 ...
- layui dtree ajax,layui中使用dtree插件数据无法正常显示
layui中使用dtree插件数据无法正常显示 layui中使用dtree插件数据无法正常显示 检查自己返回的josn数据格式和dtree需要的数据是否相同 示例格式: { "code&qu ...
- layui数据表格解析html,layui框架table 数据表格的方法级渲染详解
layui框架table 数据表格的方法级渲染详解 如下所示: //js 规范书写 var tst=table.render({ elem: '#test11' ,cols: [[ //标题栏 {ch ...
- layui数据表格搜索php代码,layui实现显示数据表格和搜索功能示例
本文实例讲述了layui实现显示数据表格和搜索功能.分享给大家供大家参考,具体如下: 搜索 layui.use('table', function(){ var table = layui.table ...
- layui自定义查询条件html页面,Layui的数据表格+springmvc实现搜索功能的例子_飛雲_前端开发者...
如下所示: 主要在前端页面加: 搜索ID: userid content 搜索 在 reload:function () { var keyWord=$("#keyWord").v ...
- layui 传递前端请求_Layui数据表格 前后端json数据接收的方法
先上效果图: 前端数据表格: 编号菜单名称菜单路径菜单图标菜单子菜单操作 编辑 删除 js代码 $(function () { //注意:这里是数据表格的加载数据,必须写 layui.use(['ta ...
- layui添加复选框_layui表格数据复选框回显设置方法
layui2.3版本,本身并不带有复选框回显功能,那么需要从源头解决此事,F12代码调试,找到与复选框关联的地方发现: 我们只需要在渲染数据回调时找到每个复选框根据数据的不同来设置回显. layui这 ...
- 前端:LayUi监听表格单元格,编辑后恢复原数据
{# edit是固定事件名,table_lay-filter是table原始容器的属性 lay-filter="对应的值" #}table.on('edit(course_tabl ...
最新文章
- 使用.NET REACTOR制作软件许可证
- 个人网盘倒下去 企业网盘顶起来
- 自动化运维平台OMserver部署过程中解决的问题1
- css的padding
- Apache Kylin Cube 的构建过程
- ctb伺服驱动器说明书_青岛FANUC伺服电机364、453故障维修
- 动态添加后的数据转换 — 后台接收数据
- 比特币到底是不是货币?
- mac android通知中心,有什么软件可以把安卓通知栏变成苹果通知栏
- NYOJ 156 Hangover
- 威纶触摸屏485通信控制多台台达变频器程序
- mysql全称量词_MySQL操作记录的方法集合,供以后查看
- 机器人 铁血兵团 魂斗罗_【魂斗罗铁血兵团中文版】魂斗罗铁血兵团中文版下载-街机中国...
- 古典概型几何概型伯努利概型条件概率
- 前端传输JSON格式数据 居然尾随了一个等于号...
- Ambari学习13_安装ambari的时候遇到的ambari和hadoop问题集
- html页面实现打印预览功能,js实现打印、页面设置、打印预览功能
- 软件卸载不了怎么办?快用IObit Uninstaller Pro软件卸载大师
- 罗永浩二次直播遇冷,用户到底想要什么样的直播 ?
- 用户sa登陆失败时,应该如何解决
热门文章
- 深入浅出Dotnet Core的项目结构变化
- Beetlex之tcp/tls服务压测工具
- 程序员修神之路--简约而不简单的分布式通信基石
- [最全操作指南] 在线六个项目全部迁移Linux
- net core WebApi——使用xUnits来实现单元测试
- Docker最全教程之使用Tencent Hub来完成CI(十)
- ElasticSearch入门 附.Net Core例子
- EntityFramework Core进行读写分离最佳实践方式,了解一下?
- 入门干货之Grpc的.Net 封装-MagicOnion
- 3到6年的.NETer应该掌握哪些知识