Check the box "Disable all checkboxes" that don't work on all pages when using datatable
Script:
$(document).ready(function() {
$(function(){
$("#result").dataTable({
"scrollX" : true,
"ordering" : true,
"order": [[ 1, "asc" ]],
"info" : true,
});
});
$("#all").click(function () {
if ($("#all").is(':checked')) {
$(".checkboxclass").each(function () {
$(this).prop("checked", true);
});
} else {
$(".checkboxclass").each(function () {
$(this).prop("checked", false);
});
}
});
});
HTML:
<table class="tg" id="result" style="width: 100%">
<thead>
<tr>
<th class="tg" style="text-align: center"><input type="checkbox" id="all"
onclick="toggle(this);" /></th>
</tr>
</thead>
<tbody>
<tr th:each="map : ${listID}">
<td class="tg bg" align="center"><input type="checkbox" class="checkboxclass" name="check"
th:id="${map['ID']}" th:value="${map['ID']}" /></td>
</tr>
</tbody>
</table>
Checking one checkbox allows you to select everything except the current page only. It doesn't work for the rest of the paginated pages
Can anyone help on this issue. Thank.
source to share
It is very likely that you have duplicate identifiers; if you have more than one element with the same ID, for example id="all"
, resulting in invalid HTML and you cannot predict how different browsers might handle it. Most usually choose the former and ignore the rest.
Change:
<input type="checkbox" id="all" onclick="toggle(this);" />
To:
<input type="checkbox" class="all" ....
So your code will look like this:
$(".all").on('change', function () {
$(this).closest('table').find('.checkboxclass').prop('checked', this.checked );
});
UPDATE
Thanks for the clarification; I'll leave that above so that your comments, where you clarified this, may remain relevant.
Here's how you can fix this problem:
$(function(){
var table = $("#result").dataTable({
"scrollX" : true,
"ordering" : true,
"order": [[ 1, "asc" ]],
"info" : true,
});
});
$("#all").on('click', function () {
var cells = table.api().cells().nodes();
$( cells ).find('.checkboxclass').prop('checked', this.checked);
});
});
//source: https://www.datatables.net/forums/discussion/22728/datatables-1-10-select-all-checkbox-and-hidden-rows-pages
Note that $(document).ready(function() { .... });
and $(function() { .... });
are different ways of writing the same thing - there is no need to insert them.
source to share
which you specified when you clicked on the toggle function, but it is not being used. please find a code snippet that will help sort out ur problem.
<table class="tg" id="result" style="width: 100%">
<thead>
<tr>
<th class="tg" style="text-align: center">
<input type="checkbox" id="all" />
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg bg" align="center"><input type="checkbox" class="checkboxclass" name="check" /></td>
<td class="tg bg" align="center"><input type="checkbox" class="checkboxclass" name="check" /></td>
<td class="tg bg" align="center"><input type="checkbox" class="checkboxclass" name="check" /></td>
<td class="tg bg" align="center"><input type="checkbox" class="checkboxclass" name="check" /></td>
</tr>
</tbody>
</table>
$("#all").click(function () {
if (this.checked) {
$('.checkboxclass').each(function () {
this.checked = true;
})
}
else {
$('.checkboxclass').each(function () {
this.checked = false;
})
}
})
source to share