Menu
This is for an open source project I created for a K12 school. Please see the following:
http://users.sch.gr/chertour/projectsms/sms_list_ajax_demo.html
You will find:
The JS code:
$(document).ready(function() {
var table = $('#students').DataTable({
"processing": true,
"serverSide": true,
"ajax": 'students_list_db_sms_send.php',
responsive: {
details: {
type: 'column',
target: 'tr'
}
},
'columnDefs': [{
targets: 0,
"checkboxes": {
"selectRow": true
}
},
{
targets: 1,
className: 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
}
],
'select': {
'style': 'multi'
},
'order': [
[2, 'asc']
]
});
$('#students tbody').on('click', 'input[type="checkbox"]', function() {
var tr = $(this).closest('tr');
var rowData = table.row(tr).data();
var rows_selected = table.column(0).checkboxes.selected();
$('#sms_names').text('');
$.each(rows_selected, function(index, rowId) {
$('#sms_names').append(' ' + rowId);
});
});
/************************************THIS IS FROM THE FOLLOWING FIDDLE*****************************************/
/* https://jsfiddle.net/snqw56dw/466/ */
$('#students').on('init.dt', function() {
$('#students thead th input[type="checkbox"]').on('click', function(e) {
var rows_selected = table.column(0).checkboxes.selected();
$('#sms_names').text('');
$.each(rows_selected, function(index, rowId) {
$('#sms_names').append(' ' + rowId);
});
});
});
});
The corresponding HTML is:
<body>
<hr>
<table id='students' class='display' width='100%' cellspacing='0'>
<thead>
<tr>
<th></th>
<th></th>
<th>name</th>
<th>surname</th>
<th>fathers name</th>
<th>date</th>
<th>tel</th>
<th>class</th>
</tr>
</thead>
</table>
<span id="sms_names"></span>
</body>
I have enabled the first row as the checkboxes row.
When I click in a checkbox the rowID is printed in a <span> element.
Multiple checkboxes printed as expected.
When I press the "Select All" checkbox, the checkboxes are all selected but nothing is printed.
When I toggle ("Select All" checkbox UNSELECTED) then every value is printed.
It is supposed to be the other way around. I have tried numerous variations but to no avail. Is there something I missed? Any ideas or suggestions are greatly appreciated.
951
The problem is in your click event handler, it fires before Checkbox plug-in has a chance to update list of selected checkboxes.
Use columns.checkboxes.selectCallback to handle select/deselect event for checkboxes.
For example:
$(document).ready(function() {
var table = $('#example').DataTable({
'ajax': 'https://api.myjson.com/bins/1us28',
'columnDefs': [
{
'targets': 0,
'checkboxes': {
'selectRow': true,
'selectCallback': function(){
printSelectedRows();
}
}
}
],
'select': {
'style': 'multi'
},
'order': [[1, 'asc']]
});
});
// Print selected rows
function printSelectedRows(){
var rows_selected = $('#example').DataTable().column(0).checkboxes.selected();
// Output form data to a console
$('#example-console-rows').text(rows_selected.join(","));
};
See this example for code and demonstration.
118
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
