jQuery DataTables: Row selection using checkboxes and 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

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();
            });
    
  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!

  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

      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

          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

  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

      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

  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

  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

  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,

      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 🙂

  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?

  9. 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']]
    
          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.

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

  11. 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…

  12. 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)

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

    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.

      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!

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

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

Leave a Reply

(optional)

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