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

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

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

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

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

    
        所有用户
        VIP用户
        普通用户
    


    
    

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里就可以了，其他问题欢迎留言