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

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

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

('table', function(){
              var table = ;

                ({
                    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
                  });
  
              //监听表格复选框选择
              ('checkbox(demo)', function(obj){
                (obj)
              });
              //监听工具条
              ('tool(demo)', function(obj){
                var data = ;
                if( === 'detail'){
                  ('ID：'+  + ' 的查看操作');
                } else if( === 'del'){
                  ('真的删除行么', function(index){
                    ();
                    (index);
                  });
                } else if( === 'edit'){
                  ('编辑行：<br>'+ (data))
                }
              });
              
              var $ = layui.$, active = {
                getCheckData: function(){ //获取选中数据
                  var checkStatus = ('idTest')
                  ,data = ;
                  ((data));
                }
                ,getCheckLength: function(){ //获取选中数目
                  var checkStatus = ('idTest')
                  ,data = ;
                  ('选中了：'+  + ' 个');
                }
                ,isAll: function(){ //验证是否全选
                  var checkStatus = ('idTest');
                  ( ? '全选': '未全选')
                }
                ,reload:function(){
                    var classifyID= $("#classifyID").val();
                    var title =$("#search-input").val();
                    if(1){
                        (1);
                        ('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，实现的功能有网站的前后台分离。