JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.1/icheck.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.1/skins/all.css">
<h3>jQuery DataTables: page.info()</h3>
<a href="https://www.gyrocode.com/articles/tag/jquery-datatables/">See more articles about jQuery DataTables</a> on <a href="https://www.gyrocode.com/articles/">Gyrocode.com</a><hr>
<table class="table table-bordered table-striped dataTable" id="example">
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Code</th>
<th>Desc</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" data-sizeid="1" class="chk-sizes"></td>
<td>1</td>
<td>011 </td>
<td>2011 </td>
</tr>
<tr>
<td><input type="checkbox" data-sizeid="2" class="chk-sizes"></td>
<td>2</td>
<td>03 </td>
<td>0/3 </td>
</tr>
<tr>
<td><input type="checkbox" data-sizeid="3" class="chk-sizes"></td>
<td>3</td>
<td>06 </td>
<td>0/6 </td>
</tr>
<tr>
<td><input type="checkbox" data-sizeid="4" class="chk-sizes"></td>
<td>4</td>
<td>1 </td>
<td>10cm </td>
</tr>
<tr>
<td><input type="checkbox" data-sizeid="5" class="chk-sizes"></td>
<td>5</td>
<td>1 </td>
<td>1m </td>
</tr>
<tr>
<td><input type="checkbox" data-sizeid="6" class="chk-sizes"></td>
<td>6</td>
<td>1 </td>
<td>23cm </td>
</tr>
<tr>
<td><input type="checkbox"...
JavaScript
$(document).ready(function(){
var table = $('#example').DataTable({
'drawCallback': function(settings){
//iCheck for checkbox and radio inputs
$('input[type="checkbox"]').iCheck({
checkboxClass: 'icheckbox_polaris',
radioClass: 'iradio_polaris'
});
}
});
});