如何在jQuery数据表中获取数组中的所有复选框

Question

我有以下数据表，它使用带有 4 列复选框的 ajax 获取数据。最后一列选中所有复选框。

对于每一行，每个复选框列都有​​以下元素：

1. <input data-type="col1" data-id="123" type="checkbox">
2. <input data-type="col2" data-id="123" type="checkbox">
3. <input data-type="col3" data-id="123" type="checkbox">
4. <input data-type="all" data-id="123" type="checkbox">

Id= 123 是行 ID。

现在，当我对网格进行分页时，我需要将所有检查过的值传递给服务器，这样我就可以暂时存储它们，如果我去之前，我可以再次显示它们。

这是发生分页时的代码：

 if (typeof dataTable != 'undefined') {
     $("input:checked", dataTable.rows().nodes()).each(function() {
         console.log($(this).val()); 
     });
 }

我想要的是这样一个数组：

[
{'id': 123, 'col1': true, 'col2': true, 'col3': false},
{'id': 332, 'col1': true, 'col2': true, 'col3': true}, 
{'id': 401, 'col1': false, 'col2': true, 'col3': false},
...
]

我怎样才能得到它，或者也许有更简单的方法？

Answer 1

我已经玩了一段时间了，如果我理解你的推理正确，你会尝试在分页发生之前获取对当前页面的引用，以便存储数据的状态，所以它不是丢失的？我还没有想出一种拦截分页事件的方法，只是在它触发后和表重绘后监听它并调用一个函数，但我会继续寻找。与此同时，我想出了一种在页面加载之间维护数据的方法——通过将其存储在表的原始数据中。鉴于此表结构：

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>ID</th>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
      <th>Four</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>false</td>
      <td>false</td>
      <td>false</td>
      <td>false</td>
    </tr>
    <!-- Mainy more rows -->
  </tbody>
</table>

然后这段代码：

  var example = $("#example").DataTable({
    columns: [
      null, {
        render: function(data, type, row, meta) {
          var input = $("<input/>", {
            "data-type": "col1",
            "data-id": row[0],
            "type": "checkbox",
          });
          if (data === "true") {
            input.attr("checked", "checked");
          }
          return input.prop("outerHTML");
        }
      }, {
        render: function(data, type, row, meta) {
          var input = $("<input/>", {
            "data-type": "col2",
            "data-id": row[0],
            "type": "checkbox",
          });
          if (data === "true") {
            input.attr("checked", "checked");
          }
          return input.prop("outerHTML");
        }
      }, {
        render: function(data, type, row, meta) {
          var input = $("<input/>", {
            "data-type": "col3",
            "data-id": row[0],
            "type": "checkbox",
          });
          if (data === "true") {
            input.attr("checked", "checked");
          }
          return input.prop("outerHTML");
        }
      }, {
        render: function(data, type, row, meta) {
          var input = $("<input/>", {
            "data-type": "all",
            "data-id": row[0],
            "type": "checkbox"
          });
          if (data === "true") {
            input.attr("checked", "checked");
          }
          return input.prop("outerHTML");
        }
      }

    ]
  });
  $('#example tbody').on('click', 'td', function() {
    if ($(this).find("input").length) {
      var cell = example.cell(this);
      cell.data($(this).find("input").prop("checked").toString());
      var rowData = example.row($(this).closest("tr")).data();
      if ($(this).find("input").data("type") === "all") {
        if ($(this).find("input").prop("checked").toString() === "true") {
          example.row($(this).closest("tr")).data([rowData[0], "true", "true", "true", "true"]);
        } else {
          example.row($(this).closest("tr")).data([rowData[0], "false", "false", "false", "false"]);
        }
      } else {
        if ((rowData[1] === "true") && (rowData[2] === "true") && (rowData[3] === "true")) {
          example.row($(this).closest("tr")).data([rowData[0], rowData[1], rowData[2], rowData[3], "true"]);
        } else {
          example.row($(this).closest("tr")).data([rowData[0], rowData[1], rowData[2], rowData[3], "false"]);
        }
      }
      example.draw(false);
    }
  });
  $('#example').on('page.dt', function() {
    var dataObject = [];
    example.rows().data().each(function(k, v){
      var rowData = example.row(v).data();
      dataObject.push(
        {
          'id': rowData[0], 
          'col1': rowData[1], 
          'col2': rowData[2], 
          'col3': rowData[3]
        }
      )
    });
    console.log(dataObject);
  });

将在分页事件之间存储您的数据。您的用例可能会有所不同，但请记住渲染功能可能需要更改。我会继续寻找分页前的事件，但是如果我理解正确的话，这应该可以满足您的需求吗？工作 JSFiddle here.

附言我不确定这是否是对所陈述问题的答案，只是我遇到的问题。