layui数据表格实现重载数据表格功能(搜索功能）
layui数据表格实现重载数据表格功能，以搜索功能为例
- 加载数据表格
- 实现搜索功能和数据表格重载
- 全部代码
加载数据表格
按照layui官方文档示例
HTML部分
JavaScript部分
vartable=layui.table;
//执行渲染
table.render({
elem:'#demo'//指定原始表格元素选择器（推荐id选择器）
,height:315//容器高度
,cols:[{}]//设置表头
//,……//更多参数参考右侧目录：基本参数选项
});
官方的文档已经把方法说的很明白了，下面展示实例用法（HTML部分依照官方文档，不用修改）
layui.use('table',function(){
vartable=layui.table;
table.render({
//表格容器ID
elem:'#ware_info'
//表格ID，必须设置，重载部分需要用到
,id:'tableOne'
//数据接口链接
,url:"异步请求数据接口地址"
//附加参数，posttoken
,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(){
//搜索条件
varsend_name=$('#send_name').val();
varsend_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(){
vartable=layui.table;
table.render({
//表格容器ID
elem:'#ware_info'
//表格ID，必须设置，重载部分需要用到
,id:'tableOne'
//数据接口链接
,url:"你的异步数据接口地址"
//附加参数，posttoken
,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(){
//搜索条件
varsend_name=$('#send_name').val();
varsend_data=$('#send_data').val();
table.reload('tableOne',{
method:'post'
,where:{
'csrfmiddlewaretoken':token,
'send_name':send_name,
'send_data':send_data,
}
,page:{
curr:1
}
});
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。