jquery datatable配列内のすべてのチェックボックスを取得する方法

Question

次のdataTableを使用して、チェックボックスに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です。

グリッドを表示すると、サーバーに渡す必要があるすべての値を渡す必要があります。一時的に保存できるので、前に行くと再び表示できます。

これは、ページングが発生したときに、私が持っているコードです：私はそれを得ることができる方法上の任意の手がかり

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

：

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

私が取得したいと思い何このような配列のですか？またはより簡単な方法かもしれません。

私はしばらくの間、これでプレーしてきたと私が正しくあなたの推論を理解していれば、ページングは​​の状態を保存するために発生する前に、現在のページへの参照を取得しようとしている

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.私はこれが答えであるとは確信していません。