Question

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

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

<input data-type="col1" data-id="123" type="checkbox">
<input data-type="col2" data-id="123" type="checkbox">
<input data-type="col3" data-id="123" type="checkbox">
<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。

P.S。我不确定这是对问题的回答，只是我的绊脚石。

jquery datatable如何获取数组

1 个答案: