關於layui中tablle 渲染數據後 sort排序問題

時間 2019-12-02

標籤關於 layui tablle 渲染數據 sort 排序問題简体版

原文原文鏈接

table.render({
          id:'test',
          elem: '#test'
          //,height: 350
          ,url: "/admin/members/list/"
          , request: {
              pageName: 'page' //頁碼的參數名稱，默認：page
              ,limitName: 'limit' //每頁數據量的參數名，默認：limit
          }
          ,initSort: {
              field: 'id' //排序字段，對應 cols 設定的各字段名
              ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默認排序
          }
          ,sort:true  //重點1：這裏的sort表示 table表在取得接口數據後，對頁面渲染後的table數據進行排序。同時，這裏的true 會影響頁面sort 上下小箭頭的 顯示效果
          ,method: 'post'
          ,page: true
          ,limit: 10
          ,toolbar: '#toolbarDemo'
          ,cols: [[
              {field:'id', title:'ID',fixed: 'left', unresize: true, sort: true, width:70}
              ,{field:'user_name', title:'員工姓名'}
              ,{field:'name', title:'部門', sort: true}
              ,{field:'station', title:'崗位', sort: true}
              ,{field:'identity_card', title:'身份證',}
              ,{field:'user_phone', title:'手機號'}
              ,{field:'add_time', title:'添加時間', width:170}
              ,{field:'tag', title:'標籤',}
              ,{field:'update_time', title:'必修',toolbar: '#barTs'}
              ,{fixed: 'right', title:'操做', toolbar: '#barDemo', width:160}
          ]]
      });

因爲分頁問題，這種排序不少時候不符合項目需求，根據官方文檔介紹，能夠進行table sort與接口進行交互，從而影響數據 全文排序 效果數據庫

table.on('sort(test)', function(obj){ //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應的值"
  console.log(obj.field); //當前排序的字段名
  console.log(obj.type); //當前排序類型：desc（降序）、asc（升序）、null（空對象，默認排序）
  console.log(this); //當前排序的 th 對象
  
  //儘管咱們的 table 自帶排序功能，但並無請求服務端。
  //有些時候，你可能須要根據當前排序的字段，從新向服務端發送請求，從而實現服務端排序，如：
  table.reload('test', {
    initSort: obj //記錄初始排序，若是不設的話，將沒法標記表頭的排序狀態。 layui 2.1.1 新增參數
    ,where: { //請求參數（注意：這裏面的參數可任意定義，並不是下面固定的格式）
      field: obj.field //排序字段   在接口做爲參數字段  field order
      ,order: obj.type //排序方式   在接口做爲參數字段  field order
    }
  });
});

以上代碼，主要做用是：監聽table 表頭的事件，獲取到sort 排序的字段與排序類型（正序，倒序），把該參數傳回接口，並對數據庫進行排序查詢。ide

接口中服務端代碼處理:工具

$param['order_name'] = empty($this->request->post('field')) ?'id':$this->request->post('field');
$param['order_type'] = empty($this->request->post('order')) ?'desc':$this->request->post('order');

看下我聯繫點擊三次顯示的打印數據的效果post

 //監聽排序
    table.on('sort(test)', function(obj){ //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應的值"
        console.log(obj.field); //當前排序的字段名
        console.log(obj.type); //當前排序類型：desc（降序）、asc（升序）、null（空對象，默認排序）
        console.log(this) //當前排序的 th 對象*/

       
    });

這裏還要說一個 layui中排序的一個操做規則：若是連續點擊三下表頭（不是點擊排序的上下小箭頭），table排序會有三種排序狀態，按順序分別是升序、降序、返回點擊前初始狀態排序。優化

在排序的監控事件中獲取到的排序類型就是上面代碼中也寫過的 ui

console.log(obj.type); //當前排序類型：desc（降序）、asc（升序）、null（空對象，默認排序）

第三次點擊，服務端接收的數據以下this

$param['order_name'] = empty($this->request->post('field')) ?'id':$this->request->post('field');  //接到的數據  "name" $param['order_type'] = empty($this->request->post('order')) ?'desc':$this->request->post('order'); //接到的數據   null

因此在服務端還有加一個判斷處理url

$param['order_name'] = empty($this->request->post('field')) ?'add_time':$this->request->post('field');
$param['order_type'] = empty($this->request->post('order')) ?'desc':$this->request->post('order');
if(empty($this->request->post('order'))){
   $param['order_name']  ='id';  //改爲  最初始 默認的排序字段
}