layui table 方法渲染 筛选重载和搜索重载实现

公司产品选用的技术栈包含了layui传送门，这是一个简洁大方地前端ui框架，上手简单，开源，长期维护，并且有社区FLY。

layui有许多问题，但是能被解决的问题都不算问题，只不过需要你仔细看文档，经常逛社区。

这里给大家介绍它的table模块，因为我在使用中遇到了许多问题，这里做汇总。

1、表格方法渲染（使用内置的ajax）
table模块最实用的功能就是避免我们ajax通信后还要依据解析数据手动生成并添加元素，简单来说，你只需要：

<form class="layui-form"  action="">
<div class="form-select">
    <select class="selectName" lay-filter="selectName">
        <option value="0">所有用户</option>
        <option value="1">VIP用户</option>
        <option value="2">普通用户</option>
    </select>
</div>
<div class="form-search">
    <input type="text" placeholder="按用户名搜索" class="searchName">
    <i class="searchBtn iconfont icon-fangdajing" alt=""></i>
</div>
<table id="user-table" class="layui-hide" lay-filter="user"></table>
<script type="text/html" id="table-bar">
       <a lay-event="del">删除</a>|
       <a lay-event="gotoPage">查看详情</a>
</script>
</form>
<script>
			var userTable
			var options = {
            	elem: '#user-table',
            	headers: {
               		 'Authorization':token  //通信中的token传递
            	},
            	page:true,//默认开启分页
            	request:{
                	'limitName':'pageSize' //分页每页条数默认字段改为pageSize
            	},
           	 	url:  '/get_user_list',
            	cols: [[  // 表格的表头
	                {field:'username', title: '用户名'}
	                ,{field:'nickname', title: '昵称', sort: true}
	                ,{field:'login_time', title: '最近登录时间',sort:true}  //开启排序
	                ,{field:'login_ip', title: '最近登录IP', }
	                ,{field:'log', title: '登录操作日志', sort: true}
	                ,{field:'right', title: '操作', toolbar:"#table-bar"}
	            ]],
            	parseData:function(res){
                	//这个函数非常实用，是2.4.0版本新增的，当后端返回的数据格式不符合layuitable需要的格式，用这个函数对返回的数据做处理，在2.4.0版本之前，只能通过修改table源码来解决这个问题
                	return {
                    	code:res.status=='success'?0:1,
                    	msg:res.status,
                    	count:count, //总页数，用于分页
                    	data:res.data.userList
                	}
           		}
        	}
			layui.use('table',function(){
				var lTable = layui.table;
				userTable = lTable.render(options)  //获取数据并渲染
			})
</script>

2、表格中的事件
继续上面的代码

			layui.use('table',function(){
				var lTable = layui.table;
					userTable = lTable.render(options) 
				table.on('tool(user)',function(obj){
		            console.log(obj) //你会看到obj包含了你所需要的所有数据
		            if(obj.event == 'del'){
		                layer.confirm('您确定要删除该用户：' + obj.data.username + '吗？', {
		                    title:'删除用户',
		                    btn: ['确定','取消']
		                }, function(index){
		                	ajax().then(function(){
		                		layer.close(index)
		                		userTable.reload({
	                                page:{
	                                    curr:1   //表格重载的时候将查询页数设为第一页
	                                }
	                            })
		                	}) 
		                })
		            }else if(obj.event == 'gotoPage'){
						location.href = '/userDeatil.html?userid=' + obj.data.id
					}
		        })
			})

3、表格中的搜索

    $(document)
    	.on('click','.searchBtn',function () {
	        userTable.reload({
	            where:{
					search_arg:$('.searchName').val().trim()
	            },
	            page:{
		            curr:1
		        }
	        })
	    });
		.keyup(function(event){
	        if(event.keyCode == 13)
	        	event.preventDefault()
	            $(".searchBtn").trigger("click");
	    });

4、下拉筛选

layui.use('form',function(){
		var form = layui.form
		form.on('select(selectName)', function(data) 
            userTable.reload({
                where:{
                    role:data.value,
                    search_arg:$('#searchName').val().trim()
                },
	            page:{
		            curr:1
		        }
            })
        })
})

好了，带有筛选和搜索的列表就做完了

需要注意的问题有一个，就是每次筛选和搜索的时候，都要将当前页设置为1，即从第一页开始搜索，因为table中有一个table.config.page.curr是全局维护的变量，在每一次table重载的时候，是默认把这个变量当做当前页传递给后台的，这将导致不可预测的错误或者返回的结果不是基于第一页的

你也可以对这个变量动态赋值：

var curr = userTable.config.page.curr
if(curr != 1) curr = 1

想要将搜索和筛选做联动，只需要在每次表格重载的时候将 role和search_arg都传递到where里就可以了，其他问题欢迎留言