jQuery DataTables: Row selection using checkboxes and Select extension

We are pleased to introduce jQuery DataTables Checkboxes extension that makes it easy to add a checkbox columns to a table.

Example

Example below shows a data table using client-side processing mode where data is received from the server using Ajax.

Name Position Office Extn. Start date Salary
Name Position Office Extn. Start date Salary

Selected rows data:


Form data as submitted to the server:


Please visit dedicated jQuery DataTables Checkboxes page for more examples and documentation.

Related posts

Comments

  1. Hi, nice plugin. I Have two questions/feature requests though.

    Is it possible to
    a) put the check-all box in the footer (as well) and
    b) use custom markup for the checkboxes? render in columnDefs does not seem to work.

    Thanks for your reply

  2. I have lots of old datatables settings that were written for version 1.9. My question is does this solution still work if I change your sample datatables init setting to legacy 1.9 settings?

    1. Not sure exactly what you mean. My extension requires jQuery DataTables 1.10 or above. However jQuery DataTables 1.10 is backward compatible with legacy settings written for jQuery DataTables 1.9. If you’re using jQuery DataTables 1.9, see if you can upgrade without breaking anything.

  3. Hello,
    Thanks for the great extension, I’d like to know if there’s any chance I can make the row selectable only when you click on the checkbox and not everywhere in the row.

    Thanks in advance

  4. Hello,
    great Extension.
    I really struggle at getting to work multiple Tables with multiselect in one form and after tweaking nearly a week i really wonder if it is possible at all, i tried it like this (based on some helpers on StackOverflow):

    	datatable =  $('.table_select').DataTable( {
    		'initComplete': function(){
    		var api = this.api();
    		 api
    			.rows()
    				.every(function(){
    			   var data = this.data();
    			   if(data[1] === '1'){
    				  api.cells(this.index(), 0).checkboxes.select();
    			   }
    			});
    		},
    		order: [[2, "asc"]],
    		paging:false,
    		info:false,
    		filter:false,
    		language: {
    			"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json",
    		},
    		columns: [
    			null,
    			{ "visible": false},
    			null
    		],
    		'columnDefs': [{
    			'targets': 0,
    			'checkboxes': {
    				'selectRow': true,
    				'selectAll': false
    			}
    		}],
    		select: {
    			style: 'multi'
    		}
    	}); 
    	
    	let table = datatable.data();
    	flen = table.length;
    
    	/*for(var i = 0; i < flen; i++)
    	{
    		var acc = [];
    		
    		$.each(table[i], function(index, value){
    		{
    			acc.push(index + ': ' + value + '');
    		}
    		});
    		var pre = document.createElement('pre');
    		pre.innerHTML = acc;
    		document.body.appendChild(pre)
    	}*/
    	
    	$('.select_table_form').on('submit', function(e){
    		var form = this;
    
    		  var rows_selected = table.column(0).checkboxes.selected();
    
    		  // Iterate over all selected checkboxes
    		  $.each(rows_selected, function(index, rowId){
    			
    			// Create a hidden element 
    			 $(form).append(
    				 $('')
    					.attr('type', 'hidden')
    					.attr('name', 'select_values[]')
    					.val(rowId)
    			 );
    		  });
    	});
    

    I still only get the data from the first table.

  5. Hi there, first i would like to thank you for this amazing plugin, it saved me a lot of time. i was using it on codeigniter php frame work , although it took me some time tweaking and geting to work i managed to get to the values from the database and get selected values. but i was not able to save the selected items to a single column. if you could give me some tips it would mean a lot

    thanks in advance 🙂

  6. I am interested in a slightly different variation. I would like to have checkboxes in the row, but if you click on the checkbox in the header, instead of checking or unchecking all the checkboxes, it filters the table for rows where the checkbox is checked (or clears that filter on unchecking) I have developed a solution which will do that (basically hiding “nearest” tr if attr(“checked”) is checked – it works but it does not reflected in the dom info (e.g. that will still say “Showing 10 of 300 rows” when in fact your only seeing 3 “checked” rows)

    1. David, that is possible to do using custom filters that either include or exclude selected rows. Then info section will say something like “Showing 1 to 4 of 4 entries (filtered from 300 total entries)”. This example with custom filters can give you an idea of how it may work. I’m available for hire and can implement it for you, please contact me if interested. Thanks!

Leave a Reply

Your email address will not be published.

(Optional)