jQuery DataTables: Row selection using checkboxes and Select extension

Michael Ryvkin
70 70

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. 
		
  10. 
			
    
				

				
    
					
    Implemented jQuery DataTables Checkboxes.  I have 22 rows to display.  Clicking on the “Select All” checkbox worked in that the checkboxes in every row across all pages (3 pages) were checked.  However the “Select All” checkbox did not have the little dash image in it.  Instead it had contained a check mark, and at the bottom of the Datatable it stated “1 row selected” where it should have stated “22 rows selected”‘.
    
				
    

				
    Reply
    			
    
		
      
		
    1. 
			
		
        
		
      1. 
			
        
				

				
        
					
        I don’t understand.  What do you mean a column containing checkboxes need to have unique data in it?  How does a column that has a checkbox in the same column in every contain unique data?  I have defined the column per your solution using className:”select-checkbox”.  Can you please clarify.  Thank you.
        
				
        

				
        Reply
        			
        
		
          
		
        1. 
			
		
            
		
          1. 
			
            
				

				
            
					
            I understand now.  What was throwing me off was that all of your and everybody else’s examples had a checkbox column as the first column in the table.  In my scenario my first column was not a checkbox column, instead, the last column of my table is the checkbox column but the first column contained unique values.  So I just duplicated the first column in the table in the last column of the table that is the checkbox column and it appears to be working fine.  Thank you for the clarification.
            
				
            

				
            Reply
            			
            
		
            2. 

          

          2. 

        

        2. 

      

      2. 

    

    11. 
		
  11. 
			
    
				

				
    
					
    Michael:   I see that your checkboxes API sets the checkbox as checked / unchecked whenever a row is clicked on.
    
 That is to say that when anywhere in a given row the row is clicked on (any column) the checkbox becomes checked or unchecked. Is there a property to set so that this does not happen?  I don’t want the checkbox checked or unchecked whenever the user clicks anywhere (any column) in the row.  I only want the checkbox checked or unchecked when the user specifically checks the checkbox in a given row.  Thank you.  Gary
    
				
    

				
    Reply
    			
    
		
      
		
    1. 
			
		
        
		
      1. 
			
        
				

				
        
					
        Michael:  Thank you.  I have implemented both solutions you have provided.  In both solutions the DataTable shows “x row(s) selected” at the bottom of the table when you click on a row, in any column.  That is fine, however is it possible for that little “x row(s) selected” message to only generate when a row checkbox is clicked and not just any column of a row?  I certainly apologize it this looks like I am going in circles here.  Please advise and thanks again for your assistance.
        
				
        

				
        Reply
        			
        
		
        2. 
		
      2. 
			
        
				

				
        
					
        …Another thing I noticed is that when I use the two solutions you suggested, then  a JQurey ‘click” handler I coded which looks like:
        
 $(‘#myTableName’).on(‘click’, ‘tbody input[type=”checkbox”]’, function(e){…})
        
…does not work, however this JQuery click handler does work when I configure columnDefs as:
        
                 ‘targets’: 9,
        
                  ….
        
                  ‘checkboxes’: {
        
                        ‘selectRow’: true
        
                    }
        
Your thoughts?
        
thank you
        
				
        

				
        Reply
        			
        
		
        3. 

      

      2. 

    

    12. 
      


            
      
   
   
   	

		
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.