jQuery DataTables: Row selection using checkboxes and Select extension

Michael Ryvkin
15 15

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 for more examples and documentation.

         


   














 

   

      
Related posts

      


     
         

            

               

                  

                  
               

                  jQuery DataTables: How to submit all pages form data
               

            

         

     
         

            

               

                  

                  
               

                  jQuery DataTables: Row grouping and checkboxes
               

            

         

     
         

            

               

                  

                  
               

                  jQuery DataTables: Save and restore table state using unique URL
               

            

         

     
         

            

               

                  

                  
               

                  Laravel DataTables and sortable DateTime/Carbon objects
               

            

         

      

   



            
   
   
         



   
         
Comments


            
      
      
    
         		
  1. 
			
    
				

				
    
					
    Hi Michael,
    

    we have a EDIT button which edits the selected  rows of the table and after that we are calling  table.ajax.reload(). On screen select  info message “No of rows selected still shows”. After table.ajax.reload() this select info message should not come. I debug and found that its coming from showInfoSelected.  Can you assist?
    

    Thanks,
    
Pritesh Sahni
    
				
    

				
    Reply
    			
    

      
		
    1. 
			

      2. 
		
    2. 
			

        
		
      1. 
			
        
				

				
        
					
        Hi Michael,
        

        Thanks for updating. One thing its working when i have used dataTables.checkboxes.js and not the minified version.
        

        Thanks,
        
Pritesh Sahni
        
				
        

				
        Reply
        			
        

          
		
        1. 
			

            
		
          1. 
			

            2. 

          

          2. 

        

        2. 

      

      3. 

    

    2. 
		
  2. 
			
    
				

				
    
					
    Hi Michael,
    

    selectAllPages never take effect when switch to the next page, the return data always include the before page data
    

    thanks.
    
				
    

				
    Reply
    			
    

      
		
    1. 
			

      2. 

    

    3. 
		
  3. 
			
    
				

				
    
					
    Great Plugin Michael, I would like to use this plugin. I don’t call my table as json format. One day I would like to call them in json but  at the moment I just simply use 
    

    foreach ($rowData as $row) : $id = $row->_kpnID; ?><tr class="editable details-control collapsed" data-values="action" id="{{ $id }}"
    

    and my output looks like this 
    

    					
1
152808
......
...

  					
2
152868

    

    I was using checkboxes as you can see but I would like to make the checkboxes hidden and select them by clicking the row(s)
    
I am not sure how to submit the the id(s) since I am not retrieving the id’s via ajax. Can you help me please? I would appreciate if you could send me a working example which is not getting data via ajax.
    
				
    

				
    Reply
    			
    

    4. 
		
  4. 
			
    
				

				
    
					
    Great Plugin Michael, I would like to use this plugin. I don’t call my table as json format. One day I would like to call them in json but  at the moment I just simply use 
    

        foreach ($rowData as $row) : $id = $row->_kpnID; ?><tr class="editable details-control collapsed" data-values="action" id="{{ $id }}"…
    

    and my output looks like this 
    

            1
    
        152808
    
        ……
    
        …
    

            2
    
        152868
    

    I was using the checkboxes as you can see but I would like to make the checkboxes hidden and select them by clicking the row(s)
    
I am not sure how to submit the the id(s) since I am not retrieving the id’s via ajax. Can you help me please? I would appreciate if you could send me a working example which is not getting data via ajax.
    
				
    

				
    Reply
    			
    

    5. 
		
  5. 
			
    
				

				
    
					
    Hi, I love the plugin.  I want to be able to select a single row instead of multiple rows.  When I include the option select{ style: 'single'}, it selects a single row if I click on the table row but if I click the checkboxes it can select multiples.
    
				
    

				
    Reply
    			
    

      
		
    1. 
			
      
				

				
      
					
      Reynaldo, checkboxes are meant for multiple selection, you might want to remove checkbox column altogether since it doesn’t make sense with single row selection. Although with the most recent version of the plug-in it may be possible to achieve what you want if you remove “select all” control, see this example for code and demonstration.
      
				
      

				
      Reply
      			
      

      2. 

    

    6. 
		
  6. 
			
    
				

				
    
					
    Is there any proper way to wrap the input checkboxes?
    

    Something like this:
    

    <label><input type="checkbox" class="dt-checkboxes"></label>
    

    Thanks!
    
				
    

				
    Reply
    			
    

      
		
    1. 
			
      
				

				
      
					
      There is a way to customize appearance by using render option. However there seems to be some bug with label-wrapping the input, and it becomes unclickable, see this example. I will try to correct the issue as soon as possible and will follow-up here.
      
				
      

				
      Reply
      			
      

        
		
      1. 
			

        2. 

      

      2. 
		
    2. 
			
      
				

				
      
					
      There seems to be weird issue with label element in the column containing checkbox. Currently the workaround is either to use CSS #example label { pointer-events: none; }, see this example or updated checkbox plugin. I updated it yesterday but it requires the latest DataTables and Select extension, see this example.
      
				
      

				
      Reply
      			
      

        
		
      1. 
			
        
				

				
        
					
        Very nice! Thank you! I’ll give a try with this example. Do you think I can add the same to the ‘select all’ (dt-checkboxes-select-all) checkbox as well in the thead?
        
				
        

				
        Reply
        			
        

          
		
        1. 
			

            
		
          1. 
			

            2. 

          

          2. 

        

        2. 

      

      3. 

    

    7. 
		
  7. 
			
    
				

				
    
					
    Hi,
    

    It really looks great.
    
I can see so many applauds but i cannot download the pluggin..404 not found error comes. 
    

    Is it not available anymore?
    
				
    

				
    Reply
    			
    

      
		
    1. 
			

        
		
      1. 
			

        2. 

      

      2. 

    

    8. 
      


            
      
   
   
   	

		
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)