jQuery DataTables: Row selection using checkboxes and Select extension

Michael Ryvkin
59 59

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

				
    
					
    Thank you for great plugin and tutorial.
    
I have a question please . I need to post to my php script not only the ID but also
    
the Name and Office (in the example above) , what to change in the code please ?
    

    Thank you!
    
				
    

				
    Reply
    			
    

    3. 
		
  3. 
			
    
				

				
    
					
    Very useful indeed, but i need some help for a simple use case:
    
in my datatable i need to show some checkboxes as disabled (due some row item attributes) but the script override this option making every checkbox enabled (i can clearly see my disabled checkboxes turning enabled on the calling of initcomplete datatable event).
    

    Is there a way to keep default checkbox enabled/disabled status?
    

    Thanks in advance
    
				
    

				
    Reply
    			
    

      
		
    1. 
			

        
		
      1. 
			
        
				

				
        
					
        Great addition but I am running into a problem. 
        

        When I use your example, it works great. If I want to use my own table (generated from another system like a .net page, get the error: 
        

        TypeError: ctx.checkboxes is undefined; can’t access its “s” property
        

        As a proof of concept I took your example table and hardwired it into the html page as example2 and removed the ajax line:
        

         'ajax': '/lab/jquery-datatables-checkboxes/ids-arrays.txt',

        

        Then simply changed 
        

        var table = $('#example1').DataTable({ ...

        

        To my new table example2
        

        var table = $('#example2').DataTable({ ...

        

        With that example I get the same data when calling 
        

         'createdCell':  function (td, cellData, rowData, row, col){
               if(rowData[2] === 'Software Engineer'){
                  this.api().cell(td).checkboxes.disable();
               }
            }

        

        When debugging, rowData[2] correctly matches 'Software Engineer' but the call to this.api().cell(td).checkboxes.disable(); throws the error 
        

        TypeError: ctx.checkboxes is undefined; can’t access its “s” property
        

        Any insight would be appreciated.
        

        Thanks,
        
Randy
        
				
        

				
        Reply
        			
        

          
		
        1. 
			

            
		
          1. 
			
            
				

				
            
					
            Your support on a Sunday evening is fantastic. That is the inspiration I needed to move forward. 
            

            Thank you so much for such a great addon.
            

            Randy
            
				
            

				
            Reply
            			
            

              
		
            1. 
			

              2. 

            

            2. 

          

          2. 

        

        2. 

      

      2. 

    

    4. 
		
  4. 
			
    
				

				
    
					
    Hi Michel,when i only click on checkbox row should be selected,but when i click on anywhere in the row checkbox is getting clicked..can you help me with that
    
				
    

				
    Reply
    			
    

      
		
    1. 
			

        
		
      1. 
			
        
				

				
        
					
        Hi Michel,in this example if i click anywhere in the row it selects the whole row,but i need, when i click only on checkbox it should select the row.Thanks
        
				
        

				
        Reply
        			
        

          
		
        1. 
			

          2. 

        

        2. 

      

      2. 

    

    5. 
		
  5. 
			
    
				

				
    
					
    Hi!
    
when I try to check rows_selected I get the console error:
    
“table_cards.columns is not a function” ???
    
I am using:
    
var rows_selected = table_cards.column(0).checkboxes.selected();
    
where table_cards is the var name of the actual table where the data is build from a mysql table.
    

    best greetings
    
				
    

				
    Reply
    			
    

      
		
    1. 
			

      2. 

    

    6. 
		
  6. 
			
    
				

				
    
					
    After reinitialize table
    

    if ($.fn.dataTable.isDataTable('#TableEmployee)) {
   table = $('#TableEmployee').DataTable();
   table.destroy();
}

    

    Error occurred on checkbox click : cellIdx is undefined; can’t access its “column” property
    
				
    

				
    Reply
    			
    

    7. 
		
  7. 
			
    
				

				
    
					
    Hi! Thank you for this helpful datatables plug-in!
    
I’m storing selected rows in a database/local storage. When I was looking for a way how to load the stored checkboxes into the table, I found many way to do it in “pure” datatables, without checkboxes plug-in. None of those worked. How can I do this?
    
I can identify the checkboxes by id:
    

    
{{ row.idvar }} ... 

    

    The function is called on document.ready
    

    
  function check_vars(){
    var cart=[];
    var storage_name="selection_".concat(userid);
    if (localStorage.getItem(storage_name)){
      cart=localStorage.getItem(storage_name).split(",").map(Number);
      $.each(cart, function(index, varid){
        $('#'+varid).css( "border", "3px solid red" ); // this works, the correct cell is identified
        $('#'+varid).prop('checked', true); // not working
        document.getElementById(varid).checked=true; // not working
      })
    }
  }

    

    How can I do this?
    
Thanks in advance,
    
				
    

				
    Reply
    			
    

      
		
    1. 
			

        
		
      1. 
			
        
				

				
        
					
        Thank Michael, I have seen this example. It selects the checkboxes based on another table column, but I didn’t know how to select checkboxes based on an “external” array.
        
Now I came up with this solution:
        

        
  function check_vars(){
    var cart=[];
    var storage_name="selection_".concat(userid);
    if (localStorage.getItem(storage_name)){
      cart=JSON.parse(localStorage.getItem(storage_name));
      var table = $('#varTable').DataTable();
      $.each(table.column(0).data(), function(index, value){
        var varid=parseInt(value)
        if(cart.includes(varid)){
          table.cell(index, 0).checkboxes.select();
        }
      })
    }
  }

        

        It may not be the most elegant solution as it iterates over the whole table, but at least it now it works 🙂
        
				
        

				
        Reply
        			
        

        2. 

      

      2. 

    

    8. 
		
  8. 
			
    
				

				
    
					
    This is absolute gold! Is there a risk that the github repository will be taken down? As in, should I download the source code and maintain a copy?
    
				
    

				
    Reply
    			
    

      
		
    1. 
			

      2. 

    

    9. 
		
  9. 
			

      
		
    1. 
			

      2. 

    

    10. 
		
  10. 
			

    11. 
		
  11. 
			
    
				

				
    
					
    Hi Michael,
    
When I click on checkbox the checkbox is checked, but row is not selected, when I click anywhere else on the row the row is selected bu checkbox is not. Can you help me with this please?
    
This is the piece of code I’m using:
    

    columnDefs: [
                    {
                        'targets': 0,
                        'checkboxes': {
                            'selectedRow': true
                        }
                    }
                ],
                select: {
                    'style': 'multi'
                },
                order: [[1, 'asc']]

    
				
    

				
    Reply
    			
    

      
		
    1. 
			

        
		
      1. 
			

          
		
        1. 
			

            
		
          1. 
			
            
				

				
            
					
            Thanks for your fast reply, corrected that one, now it selects the line when I press the checkbox, but it does not select the checkbox when I press anywhere else on the line instead of checkbox cell.
            
				
            

				
            Reply
            			
            

              
		
            1. 
			

              2. 

            

            2. 

          

          2. 

        

        2. 

      

      2. 

    

    12. 
		
  12. 
			
    
				

				
    
					
    I have recently replaced my datatable library
    

    https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js
    
With
    
https://cdn.datatables.net/v/dt/dt-1.10.18/r-2.2.2/datatables.min.js
    

    Checkboxes continues to work except it does not highlight the row when selected. I have also changed the corresponding css.
    

    This example, https://jsfiddle.net/gyrocode/snqw56dw/ works but when i replace the .js with the new version the rows don’t highlight.
    

    Any suggestions?
    

    Thanks,
    
Randy
    
				
    

				
    Reply
    			
    

      
		
    1. 
			

      2. 

    

    13. 
      


            
      
   
   
   	

		
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.