Many thanks for reading. This is for an open source project I created for a K12 school. Please see the following:
You will find:
- Serverside Data fetched and embedded into a Datatable
- The www.gyrocode.com plugin for enabling checkboxes ( jQuery DataTables Checkboxes )
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*****************************************/
/* http://ift.tt/2xYF6ti */
$('#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 element.
Multiple checkboxes printed as expected.
When I press the Selectall checkbox the checkboxes are all selected but nothing is printed.
When I toggle (selectall 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 miss?
Any ideas or suggestions greatly appreciated.
Aucun commentaire:
Enregistrer un commentaire