layui表格進行所有頁全選

我們在使用layui表格的時候，會使用到layui表格的分頁，即一頁獲取多少條數據，這些都是通過后台接口來獲取的數據，要想實現所有頁全選理論上是不可能的，因為后面的數據也是通過后台獲取的，所以我們只能使用取巧的方法來實現所有頁全選

第一步：表格生成時，定義全局變量來存儲每次請求的所有數據（即當前頁數據），我這里通過idsAll來存儲所有：

 

 

 第二步，自定義復選框按鈕來實現全選功能：

$("#selectAllPagesCheck").change(function () {//自定義復選框變化
  if ($('#selectAllPagesCheck')[0].checked) {//判斷是全選還是全取消
    for (var j = 0; j < idsAll.length; j++) {
      idsAll[j]["LAY_CHECKED"] = 'true';
      var index = idsAll[j]['LAY_TABLE_INDEX'];
      //如果你的頁面還有第二個表格，就是.list2
      $('#resourceQueryResultDiv .layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);//jquery里id為鎖定生成表格的范圍，防止多表相互影響
      $('#resourceQueryResultDiv .layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]').next().addClass(
        'layui-form-checked');
    }
    // 獲取表格勾選狀態，全選中時設置全選框選中
    let checkStatus = table.checkStatus('resourceQueryTable');//此處是為了當全選后，需要讓layui表格自帶的當前頁全選的狀態也選中或者取消
    if (checkStatus.isAll) {
      $('#resourceQueryResultDiv .layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true);
      $('#resourceQueryResultDiv .layui-table-header th[data-field="0"] input[type="checkbox"]').next().addClass(
        'layui-form-checked');
    }
    qualityjson.allPage = true;
  } else {
    for (var j = 0; j < idsAll.length; j++) {
      idsAll[j]["LAY_CHECKED"] = 'false';
      var index = idsAll[j]['LAY_TABLE_INDEX'];
      //如果你的頁面還有第二個表格，就是.list2
      $('#resourceQueryResultDiv .layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', false);
      $('#resourceQueryResultDiv .layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]').next().removeClass(
        'layui-form-checked');
    }
    // 獲取表格勾選狀態，全選中時設置全選框選中
    let checkStatus = table.checkStatus('resourceQueryTable');
    debugger;
    if (checkStatus.isAll) {
      $('#resourceQueryResultDiv .layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', false);
      $('#resourceQueryResultDiv .layui-table-header th[data-field="0"] input[type="checkbox"]').next().removeClass(
        'layui-form-checked');
    }
  }
})

第三步：當表格生成后，在done回調里進行表格復選框的選中

 var len = res.data.length;//當前頁面數據長度
          var chooseNum = 0; //記錄當前頁選中的數據行數
          if ($('#selectAllPagesCheck')[0].checked) {//每次換頁后判斷是否全選，全選的話就讓復選框全選中
            for (var i = 0; i < res.data.length; i++) {
              for (var j = 0; j < idsAll.length; j++) {
                if (res.data[i].gid == idsAll[j].gid) {
                  res.data[i]["LAY_CHECKED"] = 'true';
                  var index = res.data[i]['LAY_TABLE_INDEX'];
                  //如果你的頁面還有第二個表格，就是.list2
                  $('#resourceQueryResultDiv .layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                  $('#resourceQueryResultDiv .layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]').next().addClass(
                    'layui-form-checked');
                  chooseNum++;
                }
              }
            }
          } else {
            for (var i = 0; i < res.data.length; i++) {
              for (var j = 0; j < ids.length; j++) {//ids是全局寫的單個選中數據的保存
                if (res.data[i].gid == ids[j].gid) {
                  res.data[i]["LAY_CHECKED"] = 'true';
                  var index = res.data[i]['LAY_TABLE_INDEX'];
                  //如果你的頁面還有第二個表格，就是.list2
                  $('#resourceQueryResultDiv .layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                  $('#resourceQueryResultDiv .layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]').next().addClass(
                    'layui-form-checked');
                  chooseNum++;
                }
              }
            }
          }
          // 獲取表格勾選狀態，全選中時設置全選框選中
          let checkStatus = table.checkStatus('resourceQueryTable');
          if (checkStatus.isAll) {
            $('#resourceQueryResultDiv .layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true);
            $('#resourceQueryResultDiv .layui-table-header th[data-field="0"] input[type="checkbox"]').next().addClass(
              'layui-form-checked');
          }

以上就可以實現所有頁全選，若有不懂可以評論留言