$(document).ready(function (){
var table = $('#example').DataTable({
'ajax': {
'url': '/lab/articles/jquery-datatables-how-to-add-a-checkbox-column/ids-arrays.txt'
},
'columnDefs': [{
'targets': 0,
'searchable': false,
'orderable': false,
'className': 'dt-body-center',
'render': function (data, type, full, meta){
return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
}
}],
'order': [[1, 'asc']]
});
// Handle click on "Select all" control
$('#example-select-all').on('click', function(){
// Get all rows with search applied
var rows = table.rows({ 'search': 'applied' }).nodes();
// Check/uncheck checkboxes for all rows in the table
$('input[type="checkbox"]', rows).prop('checked', this.checked);
});
// Handle click on checkbox to set state of "Select all" control
$('#example tbody').on('change', 'input[type="checkbox"]', function(){
// If checkbox is not checked
if(!this.checked){
var el = $('#example-select-all').get(0);
// If "Select all" control is checked and has 'indeterminate' property
if(el && el.checked && ('indeterminate' in el)){
// Set visual state of "Select all" control
// as 'indeterminate'
el.indeterminate = true;
}
}
});
// Handle form submission event
$('#frm-example').on('submit', function(e){
var form = this;
// Iterate over all checkboxes in the table
table.$('input[type="checkbox"]').each(function(){
// If checkbox doesn't exist in DOM
if(!$.contains(document, this)){
// If checkbox is checked
if(this.checked){
// Create a hidden element
$(form).append(
$('<input>')
.attr('type', 'hidden')
.attr('name', this.name)
.val(this.value)
);
}
}
});
});
});