layui框架默认提供的table模块，使用该模块可以快速高效的完成表格数据的开发。但是最近在使用过程中发现了一些小问题。下面一起来看下吧！
官方说明地址：https://www.layui.com/demo/table.html
需要实现的具体需求如下图：
上图中分为三个部分，我们要实现以下三个功能：
1.根据关键词搜索出想要的数据展示出来；
2.进入页面后加载默认数据；
3.通过分页控制数据的切换；
第一种方式：使用layui默认通用的方式实现
※ HTML代码
//搜索框
<form class="layui-form" action="">
<div class="layui-input-block searchKeyword">
<input type="text" name="title" value="" required lay-verify="required" placeholder="请输入搜索内容" autocomplete="off" class="layui-input keyWord">
</div>
</form>
//表格
<table class="layui-hide" id="dateList" lay-filter="test"></table>
※ javascript代码
- 刚进入页面加载数据
<script>
layui.use(['layer', 'form', 'table', 'laypage'], function () {
var laypage = layui.laypage //分页
var layer = layui.layer //弹层
var table = layui.table //表格
//首先加载默认数据
table.render({
elem: '#dateList',
url: './api/GetCorpBasicInfoList', //数据接口
title: '企业列表',
data: [],
page: true, //开启分页
limit: 10, //每页默认显示的数量
cols:[
{
field: 'CorpCode',title: '组织机构代码',width: '30%'},
{
field: 'CorpName',title: '企业名称',width: '40%'},
{
field: 'address',title: '企业注册地',width: '30%'}
],//表头
where:{
keyWord:function keyWord(){
return $(".keyWord").val()
}
},//传递参数 keyWord是获取页面中的关键词
parseData:function(res){
//请求成功后
console.log(res)
},
text:{
none: '暂无相关数据' //默认：无数据。
},
done:function(res,curr,count){
//table渲染完成后 res渲染数据，curr当前页，count总条数
}
})
})
</script>
以上代码就实现了刚进入页面后数据的加载。分页也是可以用的。如果数据没有加载出来可能是数据格式不正确，正确的数据格式应该如下：
{
"Success": true,
"MsgID": 1000,
"Count": 191236,//总条数需要在每次请求的时候返回
"data": [
{
"CorpCode": "xxx-9",
"CorpName": "xxx",
"AddRess": "xxx",
},
{
"CorpCode": "xxx-3",
"CorpName": "xxx",
"AddRess": "xxx",
}
],
"code": 0
}
//1.最重要的是data和count。要想在layui中展示出数据，并且自动计算出分页这两个参数是必须的。
//2.如果后台的数据参数名必须使用固定的无法改变，那么需要在获取数据成功后在parseData方法中处理下。
/*parseData:function(res){
//比如：后台没有返回count字段返回了Count。需要手动追加一个给对象中。
res.count=res.Count
},*/
- 实现关键词搜索数据展现
//注意：在layui.use方法里增加以下代码。
var active = {
reload:function(){
var keyWord = $(".keyWord");
var index = layer.msg('查询中，请稍等...'{
icon:16,time:false,shade:0});
setTimeout(function(){
table.reload('dateList',{
page:{
curr:1},
where:{
keyword:keyWord.val()
}
})
layer.close(index)
},500)
}
}
//监听搜索按钮。我这里由于页面上没有写点击按钮所以用Entry（回车）代替
$('.keyWord').keydown(function (event) {
var e = event || window.event;
if (e && e.keyCode == 13) {
active.reload()//执行重载方法
}
})
通过以上代码就可以实现我们的需求。但是如果你仔细点会发现在通过关键词搜索的时候页面会闪动一下，降低了体验度。下边我们使用另外一种方式进行编写：
思路：利用ajax获取数据改变表格中的数据，不对表格进行重载。
※ HTML
<form class="layui-form" action="">
<div class="layui-input-block searchKeyword">
<input type="text" name="title" value="" required lay-verify="required" placeholder="请输入搜索内容" autocomplete="off" class="layui-input keyWord">
</div>
</form>
//表格
<table class="layui-hide" id="dateList" lay-filter="test"></table>
//新增page
<div id="page"></div>
※ javascript
<script>
layui.use(['layer', 'form', 'table', 'laypage'], function () {
var laypage = layui.laypage //分页
var layer = layui.layer //弹层
var table = layui.table //表格
// 请求数据接口
function dataList(page, limit, type) {
var index = layer.msg('查询中，请稍等...',{
icon:16,time:false,shade:0});
$.ajax({
url: './api/GetCorpBasicInfoList',
method: 'get',
data: {
page: page, // 页码数
limit: limit, // 每页条数
keyWord:$(".keyWord").val(),
},
success: function (res) {
if (type == 1) {
//type=1首次调用方法后，加载分页。否则不加载分页
pageLoad(res.Count)
}
tableData(res.data)
layer.close(index)
}
})
}
//刚进入页面后首次加载数据
dataList(1, 10, 1)
// 计算并渲染分页
function pageLoad(data) {
laypage.render({
elem: 'page', //注意，这里的 page 是 ID，不用加 # 号
count: data, //数据总数，从服务端得到
limit: 10, // 每页条数
layout: ['prev', 'page', 'next','limit', 'skip'],
jump: function (obj, first) {
if (!first) {
dataList(obj.curr, obj.limit) // 分页点击传参
}
}
});
}
//渲染表格数据
function tableData(data) {
table.render({
elem: '#dateList',
cols: [
[{
field: 'CorpCode',
title: '组织机构代码',
width: '30%',
}, {
field: 'CorpName',
title: '企业名称',
width: '40%'
}, {
field: 'address',
title: '企业注册地',
width: '30%'
}]
],
limit:data.length,//注意这个limit不要写死。这个需要根据data的数量进行改变，否则改变了每页显示的数量后不管用。
data: data
})
}
//监听关键词搜索
$('.keyWord').keydown(function (event) {
var e = event || window.event;
if (e && e.keyCode == 13) {
dataList(1, 10, 1)
}
})
})
</script>
以上代码就是layui表格数据渲染以及解决重载后闪动的问题。希望对大家有帮助，如果有什么疑问请留言相互讨论…。