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 for more examples and documentation.

You Might 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

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.