jQuery DataTables: Row selection using checkboxes and Select extension

Michael Ryvkin
92 92

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

				
      
					
      There could be multiple reasons. Most obvious would be that you need to include files jQuery DataTables Checkboxes JS/CSS after jQuery DataTables JS/CSS files. If that doesn’t resolve your issue, please share an example that demonstrates the problem. Thanks!
      
				
      

				
      Reply
      			
      
		
      2. 

    

    2. 
		
  2. 
			
    
				

				
    
					
    This, like many pages / examples of a datatable with checkboxes driven with this tooling, announce “x rows selected” in the data table footer.  Mine is not doing that for some reason and as I’ve browsed several examples worth of code trying to find “the magic”, I have been unsuccessful.  So the question is either (1) Why is this syntax not automatically showing up in my DataTables footer or (2) How can I get this syntax to appear?
    
				
    

				
    Reply
    			
    
		
      
		
    1. 
			
      
				

				
      
					
      If you can share some examples publicly or privately (through the contact form), I will be able to give you more information. In general in order to see the “X rows selected”, the following conditions have to be met:
      

        

      • Checkbox extension is included and enabled for at least one column.
        • 

      • Select extension is included and enabled, see this example.
        • 

      • Row selection should be enabled for at least one column with checkboxes.selectRow option, see this example.
        • 

      • Table summary panel should be not be hidden (visible by default), see dom option.
        • 

      • Item select information in table summary panel should not be disabled (enabled by default), see select.info option.
        • 

      
				
      

				
      Reply
      			
      
		
        
		
      1. 
			
        
				

				
        
					
        Michael,
        

        Ah HA!  That was EXACTLY what I needed.  Well sort of.  I had originally, using demo examples, configured the “selectRow” option so that a checked box styled the row but found, since I use table-striping in my DataTable, I found the adjusted color (the tooling automatically references the “.selected” class) leaves things kind of hideous as you cursor over things…which I did not want.
        

        So now, while you have solved the problem by explaining that the “x rows selected” is contingent on “selectRow” to do its work, I’m left back were I was.  I basically want to change the CSS for “.selected” so it does not change the color…leaving it EXACTLY how it is so there is no VISUAL indication, but obviously still enabling the reliance on the class being present as the user clicks/unclicks the checkbox.
        

        I’m ok at CSS, but I don’t see a way to override the class so that is basically does a background-color of “leave it alone”.
        

        If you have any ideas there, would love the help…meanwhile, I’m removing the table striping which pretty much resolves the issue.  I find that row highlight (plugins) mucks that all up visually pretty badly so I’ll likely have to turn that off too.
        

        However, you definitely explained away the problem and for that, I’m grateful.
        

        Mike
        
				
        

				
        Reply
        			
        
		
        2. 

      

      2. 

    

    3. 
		
  3. 
			
		
    4. 
      


            
      
   
   
   	

		
Leave a Reply 
 



 (optional)





 


	

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