jQuery DataTables: Row selection using checkboxes and Select extension

Michael Ryvkin
69 69

We will demonstrate universal solution on how to add a checkbox column to a table, allow multiple row selection and ability to select all rows simultaneously using 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 to download the code, view examples and documentation.

      
      
   

      
You May Also Like


      



         

            

               

                  

                  
               

                  jQuery DataTables: Row selection using checkboxes
               

            

         


         

            

               

                  

                  
               

                  jQuery DataTables: Why click event handler does not work
               

            

         


         

            

               

                  

                  
               

                  jQuery DataTables: Alphabetical Search
               

            

         


         

            

               

                  

                  
               

                  jQuery DataTables: How to add a checkbox column
               

            

         

      

   












   


      

      

                  
Michael Ryvkin

         
Freelance web developer based in Perkasie, Bucks County, PA. I design and develop custom websites and web applications, perform website maintenance and provide technical support for small and medium-sized businesses.

         
Contact me for a free quote or consultation on your project.
      

   


   




         
            
   
         



   
         
Comments


            
      
      
    
         		
  1. 
			
    
				

				
    
					
    I really like this and so does my boss. When I check the select all it works fine for all pages and I can see that by paging through and looking. If I go to page 2 and select a couple of boxes and then go back to page 1 and click my button I am not getting those values. I call a function on button click called SubAll(). I did change the way I get the boxes which is most likely the issue…and #2 when I send the array to my controller method the data is empty, what am I missing? TIA.
    

    
     var values = [];

            $('#timesheet').find('input[type="checkbox"]:checked').each(function (index, rowId) {
                //this is the current checkbox
                var temp = $(this).closest('tr').attr('id');

                if (String(temp) === String("undefined")) {
                    //skip; it is the select all box
                }
                else {
                    //push to array
                    values.push({ ID: temp });
                }
            });

    
				
    

				
    Reply
    			
    
		
    2. 
		
  2. 
			
		
      
		
    1. 
			
		
      2. 

    

    3. 
		
  3. 
			
    
				

				
    
					
    Hi There,
    
I’m facing issues while trying to check checkboxes on page load.
    
Scenario – My table loads with the page and also the data in it is added in the jsp page only.After that when i initialise the datatable and use ‘createdCell’ event to check the checkboxes. it gives me an error –
    
Uncaught TypeError: Cannot read property ‘isCellSelectable’ of undefined
    
    at s. (dataTables.checkboxes.min.js:5)
    
    at s.iterator (jquery.dataTables.min.js:96)
    
    at s. (dataTables.checkboxes.min.js:5)
    

    I tried to debug the issue and found that the event is called before the cell is converted into a checkbox as in the function input ‘td’ was – data while when i do the same for a table which is created at runtime the ‘td’ was already converted to a checkbox and had the content – 
    

    I’m not sure if i was able to explain the issue properly, please do give it a look if you could understand.
    
Here’s my code –
    
JSP – 
    

    


#
SAP ID
Batch
Employee Name





${employee.sap_id}
${employee.sap_id}
${employee.batch_name}
${employee.first_name} ${employee.last_name}





    

    and JS – 
    

    
$('#emptable').DataTable({
	"lengthMenu" : [ [ 5, 10, 20, 30, -1 ], [ 5, 10, 20, 30, "All" ] ],
	'columnDefs': [{
		'targets': 0,
		'checkboxes': {'selectRow': true},
		'createdCell': function (td, cellData, rowData, row, col){
			if($("#selected_employees").val().includes(cellData)){
				this.api().cell(td).checkboxes.select();
			}
		}
	}],
	'select': {'style': 'multi'},
	'order': [[1, 'asc']]
});
    
				
    

				
    Reply
    			
    
		
    4. 
		
  4. 
			
    
				

				
    
					
    When using this code the data is undefined
    

    $('#Table1').dataTable({
                'initComplete': function (settings) {
                    var api = this.api();

                    api.cells(
                       api.rows(function (idx, data, node) {
                           return (data[1] === 'LU 29/04/2019') ? true : false;
                       }).indexes(),
                       0
                    ).checkboxes.select();
                },

    
				
    

				
    Reply
    			
    
		
      
		
    1. 
			
      
				

				
      
					
      I don’t see a problem with your code. Using callback function as a row selector became only possible in DataTables 1.10.3, check the version that you’re using. Also make sure you’re using array of arrays as your data, and not array of objects. If possible, can you create an example demonstrating the issue on jsFiddle or similar service?
      
				
      

				
      Reply
      			
      
		
      2. 

    

    5. 
		
  5. 
			
    
				

				
    
					
    Hey Michael, thx for all your work, it’s really good, but I have one question for u,
    

    if I already put all data in table(the DOM), how can I selected one checkbox?
    

    I tried “this.api().cell(td).checkboxes.select();”
    

    it’s not working, return undefined.
    

    for some reason I can’t open jsfiddle.net, so I have to ask u here. thx u.
    
				
    

				
    Reply
    			
    
		
    6. 
		
  6. 
			
		
    7. 
		
  7. 
			
    
				

				
    
					
    Hey Michael can we disable select all option in table header ? Also will it work fine if I use dialog modal to display datatable ? Please update me if I need to add any additional css ( like Jquery UI ) when using this inside dialog.
    
				
    

				
    Reply
    			
    
		
    8. 
		
  8. 
			
		
      
		
    1. 
			
      
				

				
      
					
      Thank you for your comment. I have added a new page demonstrating current level of performance, please see Performance. Plugin handles 1000 records well, but with 5000 records there is a delay when “Select All” control is clicked. Selecting individual checkboxes in all examples does not cause a delay. There is definitely a room for improvement.
      
				
      

				
      Reply
      			
      
		
      2. 

    

    9. 
		
  9. 
			
		
    10. 
      


            
      
   
   
   	

		
Leave a Reply 
			

				
You may use simple HTML to add links or lists to your comment. Also use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support language-js, language-markup and language-css for comments.
 



 (Optional)





 


			

			

	
This site uses Akismet to reduce spam. Learn how your comment data is processed.