layui實現table表格的“關鍵字搜索”功能

最近在做一個項目裏，正好用到了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，實現的功能有網站的前後臺分離。