I am using datatable plug-in to use pagination for my table. The first column of my table has checkboxes with value = some uniqueID.
I cannot seem to get all checkbox values including the ones that are already checked.
When I click on the “get checked records”, it should only display the unique checkbox values.
Any suggestions?
<!doctype html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/2.0.2/js/dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/2.0.2/css/dataTables.dataTables.min.css">
</head>
<body>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th><input type="checkbox" name='all' id="checkAll"> All</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="1"></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011-04-25</td>
<td>$320,800</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="2"></td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011-07-25</td>
<td>$170,750</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="3" checked></td>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009-01-12</td>
<td>$86,000</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="4"></td>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012-03-29</td>
<td>$433,060</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="5"></td>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008-11-28</td>
<td>$162,700</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="6"></td>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012-12-02</td>
<td>$372,000</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="7"></td>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012-08-06</td>
<td>$137,500</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="8"></td>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010-10-14</td>
<td>$327,900</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="9"></td>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009-09-15</td>
<td>$205,500</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="10"></td>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008-12-13</td>
<td>$103,600</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="11"></td>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008-12-19</td>
<td>$90,560</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="12"></td>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013-03-03</td>
<td>$342,000</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="13"></td>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008-10-16</td>
<td>$470,600</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="14"></td>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012-12-18</td>
<td>$313,500</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="15"></td>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010-03-17</td>
<td>$385,750</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="16"></td>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012-11-27</td>
<td>$198,500</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="17"></td>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010-06-09</td>
<td>$725,000</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="18"></td>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009-04-10</td>
<td>$237,500</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="19"></td>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012-10-13</td>
<td>$132,000</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="20"></td>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012-09-26</td>
<td>$217,500</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="21"></td>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011-09-03</td>
<td>$345,000</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="22"></td>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009-06-25</td>
<td>$675,000</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="23"></td>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011-12-12</td>
<td>$106,450</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="24" checked></td>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sydney</td>
<td>23</td>
<td>2010-09-20</td>
<td>$85,600</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="25"></td>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009-10-09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="26"></td>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010-12-22</td>
<td>$92,575</td>
</tr>
<tr>
<td><input type="checkbox" name="employeeID" class="select-employee" value="27"></td>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010-11-14</td>
<td>$357,650</td>
</tr>
</tbody>
</table>
<br/>
<button id="get-values">get checked records</button>
<br/>
<div id="selected">
</div>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
var table = new DataTable('#example', {
responsive: true,
"lengthMenu": [20, 40, 60, 80, 100],
"pageLength": 10
});
$('#example').on( 'click', '.select-employee', function () {
var checked = $(this).prop('checked'); // Get checkbox state
// Get row data
var row = $( this ).closest( 'tr' );
var data = table.row ( row ).data();
//update the cell data with the checkbox state
if ( checked ) {
data.check = 1;
} else {
data.check = 0;
}
});
$('#get-values').on('click', function () {
var checkedRows = [];
table.rows().every( function(rowIdx, tableLoop, rowLoop ) {
var data = this.data();
if (data.check === 1) {
checkedRows.push(data);
}
});
console.log('Checked rows via API');
console.log(checkedRows);
$('#selected').html(checkedRows);
});
});
</script>
</body>
</html>