layui实现table表格的“关键字搜索”功能_layui 搜索

最近在做一个项目里，正好用到了layui的分页。但是在做分页关键字查询时，遇到了几个问题。第一个参数的传递，第二个数据的嗮选，第三个数据的返回，第四个数据的重新加载。

如下是解决方案的js代码，和大家分享。

layui.use('table', function(){
              var table = layui.table;
 
                table.render({
                    elem: '#demo'
                    ,url:'/demo/table/user/'
                    ,cols: [[
                    {field:'id', width:80, title: 'ID', sort: true}
                      ,{field:'username', width:80, title: '用户名'}
                  ,{field:'sex', width:80, title: '性别', sort: true}
                  ,{field:'city', width:80, title: '城市'}
                  ,{field:'sign', title: '签名', minWidth: 150}
                  ,{field:'experience', width:80, title: '积分', sort: true}
                  ,{field:'score', width:80, title: '评分', sort: true}
                  ,{field:'classify', width:80, title: '职业'}
                  ,{field:'wealth', width:135, title: '财富', sort: true}
                    ]]
                ,page: true
                  });
  
              //监听表格复选框选择
              table.on('checkbox(demo)', function(obj){
                console.log(obj)
              });
              //监听工具条
              table.on('tool(demo)', function(obj){
                var data = obj.data;
                if(obj.event === 'detail'){
                  layer.msg('ID：'+ data.id + ' 的查看操作');
                } else if(obj.event === 'del'){
                  layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                  });
                } else if(obj.event === 'edit'){
                  layer.alert('编辑行：<br>'+ JSON.stringify(data))
                }
              });
              
              var $ = layui.$, active = {
                getCheckData: function(){ //获取选中数据
                  var checkStatus = table.checkStatus('idTest')
                  ,data = checkStatus.data;
                  layer.alert(JSON.stringify(data));
                }
                ,getCheckLength: function(){ //获取选中数目
                  var checkStatus = table.checkStatus('idTest')
                  ,data = checkStatus.data;
                  layer.msg('选中了：'+ data.length + ' 个');
                }
                ,isAll: function(){ //验证是否全选
                  var checkStatus = table.checkStatus('idTest');
                  layer.msg(checkStatus.isAll ? '全选': '未全选')
                }
                ,reload:function(){
                    var classifyID= $("#classifyID").val();
                    var title =$("#search-input").val();
                    if(1){
                        console.log(1);
                        table.reload('demo',
                                  {page:
                                          {
                                              curr: 1 //重新从第 1 页开始
                                          }
                                , where: { title: title,classifyID:classifyID}//这里传参  向后台
                                , url: '/demo/table/user/'//后台做模糊搜索接口路径
                                , method: 'get'
                        }); 
                    } 
                }
              };
              
              $('#search_btn').on('click', function(){
                var type = 'reload';
                active[type] ? active[type].call(this) : '';
              });  
 
});

其中页面上需要一个 button 按钮和一个input。

按钮的id是 search_btn ,input的id是search_input.

reload是实现参数参数，数据返回重新加载的一个函数。

如需了解更多，可参考课程c#建设网站上线了，用到的技术有css，js，layui，c#，sql server，实现的功能有网站的前后台分离。