jQuery DataTables: Row selection using checkboxes and Select extension

Michael Ryvkin
47 47

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.

         


      

      

                  
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.
      

   


   















         
            
   
         
   

      
You Might Also Like


      



         

            

               

                  

                  
               

                  jQuery DataTables: Row selection using checkboxes
               

            

         


         

            

               

                  

                  
               

                  jQuery DataTables: Alphabetical Search
               

            

         


         

            

               

                  

                  
               

                  jQuery DataTables: Why click event handler does not work
               

            

         


         

            

               

                  

                  
               

                  jQuery DataTables: How to add a checkbox column
               

            

         

      

   



         



   
         
Comments


            
      
      
    
         		
  1. 
			
    
				

				
    
					
    Figured it out. Should have google search more.
    

    
        Reset

        var table = $('#myTable').DataTable();

        $('#btn-reset').on('click', function (e) {
            table.rows({ selected: true }).deselect();
            e.preventDefault();
        });

    
				
    

				
    Reply
    			
    

    2. 
      


            
      
   
   
   	

		
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.