同じクラスforeachがデータテーブルjqueryで動作していない

Question

ボタンをクリックしたときにチェックボックスの値がすべて欲しいので、同じクラスをチェックボックスに入れてください。しかし、私はビューページのみの価値を得た。 10件のレコードを示す私のシステムページで

$(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); 
 
    }); 
 
});

<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>

。したがって、最初の10レコードを表示するconsole.log(check_box)、2ページ目をクリックすると、2番目の10レコードを表示するconsole.log(check_box)が表示されます。しかし、私は合計レコードが欲しい。

ありがとうございました。

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; 
} 

作業モデル...これを試してみてください：

$(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); 
 
    }); 
 
});

<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>