jQuery DataTables: Row selection using checkboxes and Select extension

Michael Ryvkin
110 110

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. 
			
    
				

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

				
    
					
    Hi;
    
I would like to select or unselect rows manually. For example; on my table, column 2 holds the “scores” data. I would like to select rows, that has score data higher than 100 and unselect the others. May be a for loop or something for solution. Thanks for your great codes…
    
				
    

				
    Reply
    			
    
		
    14. 
		
  14. 
			
    
				

				
    
					
    Hi! i have two things and are related i want to do this
    

    on select/check -> check regarding data from the selected row if can be checked or not (example Users check – on callback if one of the columns has the need value can be checked if not should show an alert or something saying that cannot be checked)
    
				
    

				
    Reply
    			
    
		
    15. 
		
  15. 
			
    
				

				
    
					
    Hi,
    

    I tried to use the ‘Select checkboxes on page load’ example on a DOM-data-source, but it looks like I am to ‘early’ here, since the input-checkbox isn’t generated at that moment the ‘createdCell’- callback is started. Is there a work around for this?
    
				
    

				
    Reply
    			
    
		
      
		
    1. 
			
      
				

				
      
					
      Marcel, there is an alternative solution you could try if you’re using deferred rendering but it only makes sense with Ajax or JavaScript data sources. However I think there is something else involved. If you can create a reproducible example, that would help to investigate.
      
				
      

				
      Reply
      			
      
		
        
		
      1. 
			
        
				

				
        
					
        Hello Michael,
        

        Thanks for your quick reply!!
        

         I just saw a previous question which also pointed to this alternative solution, and I just tried it… and it worked with that one!!
        
So this alternative solution is also good for DOM(html) sources.
        

        Thank you!
        
				
        

				
        Reply
        			
        
		
        2. 

      

      2. 

    

    16. 
		
  16. 
			
    
				

				
    
					
    Hi,
    
I tried to put a limit on the selection of check but i couldn’t.Is there any solution implemented for this?
    
Thanks in advance.
    
				
    

				
    Reply
    			
    
		
      
		
    1. 
			
		
        
		
      1. 
			
		
        2. 

      

      2. 

    

    17. 
		
  17. 
			
    
				

				
    
					
    Hi Michael,
    
First of all. Thanks for this amazing plug-in.
    

    I have a scenario where we have more than 20,000 records to display via ajax call, and we have pagination at place as well for this. but when we are doing “Select All” Checkbox then records only on the current page are getting checked , but other records on remaining pages are not getting checked, though they are getting selected.
    

    we have a requirement where we want to show the individual checkboxes of all the records across the pages should be in checked state when we click on “global select all” checkbox.
    

    Your advise will be really helpful.
    

    Thanks In advance.
    
				
    

				
    Reply
    			
    
		
    18. 
		
  18. 
			
		
    19. 
		
  19. 
			
		
    20. 
		
  20. 
			
		
    21. 
      


            
      
   
   
   	

		
Leave a Reply 
 



 (optional)





 


	

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