同一类foreach不能在datatables jquery中工作

Question

我想要所有选中的复选框值，当按钮单击时，所以在tr td复选框中指定相同的类。但我只获得了查看页面的价值。

＆＃13;

＆＃13;

$(document).ready(function() {
  $(".js_data_tables").DataTable({
    "lengthChange": false,
    "autoWidth": false
  });
  
  $(".js_check_btn").click(function(e) {
    e.preventDefault();
    
    var check_box = "";
    $(".sensor_checkbox").each(function(i, elem) {
      if ($(this).is(":checked")) {
        if (check_box != "") {
          check_box += ",";
        }
        check_box += $(this).val();
      }
    });
    alert(check_box);
    console.log(check_box);
  });
});

＆＃13;

<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<button class="js_check_btn" type="button">Get All checkbox value</button>

<table class="table table-bordered table-striped js_data_tables">
  <thead>
    <tr>
      <th>S.No</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        1
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_1" value="1" checked />
      </td>
    </tr>
    <tr>
      <td>
        2
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_2" value="2" />
      </td>
    </tr>
    <tr>
      <td>
        3
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_3" value="3" />
      </td>
    </tr>
    <tr>
      <td>
        4
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_4" value="4" />
      </td>
    </tr>
    <tr>
      <td>
        5
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_5" value="5" checked />
      </td>
    </tr>
    <tr>
      <td>
        6
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_6" value="6" />
      </td>
    </tr>
    <tr>
      <td>
        7
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_7" value="7" checked />
      </td>
    </tr>
    <tr>
      <td>
        8
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_8" value="8" checked />
      </td>
    </tr>
    <tr>
      <td>
        9
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_9" value="9" />
      </td>
    </tr>
    <tr>
      <td>
        10
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_10" value="10" checked />
      </td>
    </tr>
    <tr>
      <td>
        11
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_11" value="11" checked />
      </td>
    </tr>
    <tr>
      <td>
        12
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_12" value="12" />
      </td>
    </tr>
    <tr>
      <td>
        13
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_13" value="13" />
      </td>
    </tr>
    <tr>
      <td>
        14
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_14" value="14" />
      </td>
    </tr>
    <tr>
      <td>
        15
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_15" value="15" checked />
      </td>
    </tr>
    <tr>
      <td>
        16
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_16" value="16" />
      </td>
    </tr>
    <tr>
      <td>
        17
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_17" value="17" checked />
      </td>
    </tr>
    <tr>
      <td>
        18
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_18" value="18" checked />
      </td>
    </tr>
    <tr>
      <td>
        19
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_19" value="19" />
      </td>
    </tr>
    <tr>
      <td>
        20
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_20" value="20" checked />
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

在显示10条记录的系统页面中。所以console.log(check_box)显示前10条记录，如果我点击第二页，则console.log(check_box)显示前10条记录。但我想要完整的记录。

先谢谢。

Answer 1

试试这个......

var datatableObj = $('.tableClassName').DataTable();

$('#btnClick').on('click', function() {
   var result = getAllCheckboxValue(dataTableObj);
   console.log(result);
});

function getAllCheckboxValue(dataTableObj) {
    var checkboxValue = [];
    dataTableObj.rows().every(function () {
        var rowNode = this.node();
        $(rowNode).find(".checkboxSelection").each(function () {
            if ($(this).is(":checked")) {
                checkboxValue.push($(this).val());
            }
        });
    });
    return checkboxValue;
}

工作模式：

＆＃13;

＆＃13;

$(document).ready(function() {
  $(".js_data_tables").DataTable({
    "lengthChange": false,
    "autoWidth": false
  });
  
  $(".js_check_btn").click(function(e) {
    e.preventDefault();
    
    var check_box = "";
    $(".js_data_tables").DataTable().rows().every(function () {
        var rowNode = this.node();
        $(rowNode).find(".sensor_checkbox").each(function () {
            if ($(this).is(":checked")) {
              if (check_box != "") {
                check_box += ",";
              }
              check_box += $(this).val();
            }
        });
    });
    alert(check_box);
    console.log(check_box);
  });
});

＆＃13;

<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<button class="js_check_btn" type="button">Get All checkbox value</button>

<table class="table table-bordered table-striped js_data_tables">
  <thead>
    <tr>
      <th>S.No</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        1
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_1" value="1" checked />
      </td>
    </tr>
    <tr>
      <td>
        2
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_2" value="2" />
      </td>
    </tr>
    <tr>
      <td>
        3
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_3" value="3" />
      </td>
    </tr>
    <tr>
      <td>
        4
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_4" value="4" />
      </td>
    </tr>
    <tr>
      <td>
        5
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_5" value="5" checked />
      </td>
    </tr>
    <tr>
      <td>
        6
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_6" value="6" />
      </td>
    </tr>
    <tr>
      <td>
        7
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_7" value="7" checked />
      </td>
    </tr>
    <tr>
      <td>
        8
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_8" value="8" checked />
      </td>
    </tr>
    <tr>
      <td>
        9
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_9" value="9" />
      </td>
    </tr>
    <tr>
      <td>
        10
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_10" value="10" checked />
      </td>
    </tr>
    <tr>
      <td>
        11
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_11" value="11" checked />
      </td>
    </tr>
    <tr>
      <td>
        12
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_12" value="12" />
      </td>
    </tr>
    <tr>
      <td>
        13
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_13" value="13" />
      </td>
    </tr>
    <tr>
      <td>
        14
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_14" value="14" />
      </td>
    </tr>
    <tr>
      <td>
        15
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_15" value="15" checked />
      </td>
    </tr>
    <tr>
      <td>
        16
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_16" value="16" />
      </td>
    </tr>
    <tr>
      <td>
        17
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_17" value="17" checked />
      </td>
    </tr>
    <tr>
      <td>
        18
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_18" value="18" checked />
      </td>
    </tr>
    <tr>
      <td>
        19
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_19" value="19" />
      </td>
    </tr>
    <tr>
      <td>
        20
      </td>
      <td>
        <input type="checkbox" class="sensor_checkbox" id="sensor_checkbox_20" value="20" checked />
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;