How to add Checkbox in first column of jQuery DataTable
X

Congrats, You are Subscribed to Receive Updates.

How to add Checkbox in first column of jQuery DataTable


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"> &nbsp;&nbsp;&nbsp; Ref</th>
				<th class="text-left" tabindex="0" aria-controls="dataTables-1" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending" > &nbsp;&nbsp;&nbsp; Name</th>
				<th class="text-left" tabindex="0" aria-controls="dataTables-1" rowspan="1" colspan="1" aria-label="Platform: activate to sort column ascending" > &nbsp;&nbsp;&nbsp;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" > &nbsp;&nbsp;&nbsp;Date</th>
				<th class="text-left" tabindex="0" aria-controls="dataTables-1" rowspan="1" colspan="1" aria-label="Version: activate to sort column ascending" > &nbsp;&nbsp;&nbsp;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.

commenter

About Varadharaj V

The founder of Kvcodes, Varadharaj V is an ERP Analyst and a Web developer specializing in WordPress(WP), WP Theme development, WP Plugin development, Frontaccounting(FA), Sales, Purchases, Inventory, Ledgers, Payroll & HRM, CRM, FA Core Customization, OpenCart Theme Development, PHP, HTML, CSS, jQuery, Bootstrap development and content SEO.

2 comments

  1. commenter

    Nice example. Could you add a working fiddle for the same?

Comment Below

Your email address will not be published. Required fields are marked *

*

Current ye@r *

Menu

Sidebar

Subscribe E-mail Updates

Congrats, You are Subscribed to Receive Updates.

Advertisement

Category Posts