How to add Checkbox in first column of jQuery DataTable
- Article
- Comment (2)
How to add Checkbox in first column of jQuery DataTable. The jQuery datatable is an awesome plugin, which will help you to manage your tables clean and neat. You can able to process large volume of data within it. It will help you to perform so many operations in it. I am happy to write an tutorial with jQuery Datatable. Let’s move to the operations. Generally we require an datable with checkbox to manipulate the datas.
var table = $('#invoices-table').DataTable({ "processing": true, "serverSide": true, "ajax": "../library/php/server_processing.php", "bLengthChange": false, "bAutoWidth": false , "sScrollX": "100%", aoColumns : [ { "sClass": "center", "mData": "TaskID", "mRender": function (data, type, row) { //alert(data+'_-_'+type+'_-_'+full); return '<div class="input-control checkbox" data-role="#sample_1 .checkboxes" /> <label><input type="checkbox" name="reference" class="call-checkbox" onclick="kv_checkbox_events_enable_disable(event);" value="' + row[1] + '"> <span class="check"></span></label></div>'; } , "sWidth": "1%" }, { "sWidth": "10%" }, { "sWidth": "40%"}, { "sWidth": "8%"}, { "sWidth": "9%"}, { "sWidth": "9%"} ], orderCellsTop: true, "scrollX": true, "columnDefs": [{ // set default column settings 'orderable': false, 'targets': [0] }, { "searchable": false, "targets": [0] }], "order": [ [1, "asc"] ], "columns": [ // there must be an entry for every column {"orderable": false}, null, null, null, null, null, null ] });
the above code is checkbox with datatable. you can change your checkbox attributes with the following line of codes.
"mRender": function (data, type, row) { //alert(data+'_-_'+type+'_-_'+full); return '<div class="input-control checkbox" data-role="#sample_1 .checkboxes" /> <label><input type="checkbox" name="reference" class="call-checkbox" onclick="kv_checkbox_events_enable_disable(event);" value="' + row[1] + '"> <span class="check"></span></label></div>'; } , "sWidth": "1%" }, { "sWidth": "10%" }, { "sWidth": "40%"}, { "sWidth": "8%"}, { "sWidth": "9%"}, { "sWidth": "9%"} ],
and also you can give custom column info to the checkbox value. And finally the HTML code.
<table cellpadding="0" cellspacing="0" border="0" class="table striped hovered dataTable" id="invoices-table" aria-describedby="dataTables-1_info"> <thead> <tr> <th class="table-checkbox1"><div class="input-control checkbox" data-role="#sample_1 .checkboxes" /> <label> <input type="checkbox" class="group-checkable"> <span class="check"></span> </label> </div> </th> <th class="text-left" tabindex="0" aria-controls="orders-table" rowspan="1" colspan="1" aria-label="Engine: activate to sort column ascending" aria-sort="ascending"> Ref</th> <th class="text-left" tabindex="0" aria-controls="dataTables-1" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending" > Name</th> <th class="text-left" tabindex="0" aria-controls="dataTables-1" rowspan="1" colspan="1" aria-label="Platform: activate to sort column ascending" > Deliver To</th> <th class="text-left" tabindex="0" aria-controls="dataTables-1" rowspan="1" colspan="1" aria-label="Version: activate to sort column ascending" > Date</th> <th class="text-left" tabindex="0" aria-controls="dataTables-1" rowspan="1" colspan="1" aria-label="Version: activate to sort column ascending" > Amount</th> </tr> <tr role="row" id="filterrow" > <th style="visibility: hidden;"> </th> <th class="text-left" tabindex="0" aria-controls="orders-table" rowspan="1" colspan="1" aria-label="Engine: activate to sort column ascending" aria-sort="ascending">Ref</th> <th class="text-left" tabindex="0" aria-controls="dataTables-1" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending" > Client</th> <th class="text-left" tabindex="0" aria-controls="dataTables-1" rowspan="1" colspan="1" aria-label="Platform: activate to sort column ascending" >Deliver to</th> <th class="text-left" tabindex="0" aria-controls="dataTables-1" rowspan="1" colspan="1" aria-label="Version: activate to sort column ascending" >date</th> <th class="text-left" tabindex="0" aria-controls="dataTables-1" rowspan="1" colspan="1" aria-label="Version: activate to sort column ascending" >amount</th> </tr> </thead> </table>
That’s it.
Nice example. Could you add a working fiddle for the same?
Fiddle link may expire anytime. so i dont prefer it.