jQuery DataTables: Row selection using checkboxes and Select extension

Comments

1. Hi Michael,

   we have a EDIT button which edits the selected rows of the table and after that we are calling table.ajax.reload(). On screen select info message “No of rows selected still shows”. After table.ajax.reload() this select info message should not come. I debug and found that its coming from showInfoSelected. Can you assist?

   Thanks,
   Pritesh Sahni

   Reply

   1. Let me test it and I will get back to you.

      Reply

   2. Just pushed an update to GitHub fixing this issue. Thanks for reporting it!

      Reply

      1. Hi Michael,

         Thanks for updating. One thing its working when i have used dataTables.checkboxes.js and not the minified version.

         Thanks,
         Pritesh Sahni

         Reply

         1. You’re right, I rushed to get the update out. It’s now corrected and minified version should be updated as well.

            Reply

            1. Thanks Michael,

               Minified version is also fine now.

               Thanks,
               Pritesh

               Reply

               1. Hi Michael,
                  I am using this pulgin and tell you its awesome. I just need some thing. We have a Edit Functionality. So, user can edit one or multiple rows and data is also updating but the no of rows selected is not removing it still shows the No of rows selected. I tried to use css in drawcallback function as mentioned below. But this just remove from UI and still i can see the message No of rows selected because internally its selected.
                  “drawCallback”: function ( settings ) {
                  $( “tr” ).removeClass( “odd selected” )
                  Basically, when user update any row(s) and response come its should not show the selected rows. Please suggest

                  Reply

                  1. Hi Michael,
                     I am using this pulgin and tell you its awesome. I just need some thing. We have a Edit Functionality. So, user can edit one or multiple rows and data is also updating but the no of rows selected is not removing it still shows the No of rows selected. I tried to use css in drawcallback function as mentioned below. But this just remove from UI and still i can see the message No of rows selected because internally its selected.
                     “drawCallback”: function ( settings ) {
                     $( “tr” ).removeClass( “odd selected” )
                     Basically, when user update any row(s) and response come its should not show the selected rows. Please suggest

                     Reply

2. Hi Michael,

   selectAllPages never take effect when switch to the next page, the return data always include the before page data

   thanks.

   Reply

   1. Currenly selectAllPages doesn’t have effect in server-side processing mode, I have to mention that in the documentation.

      Reply

3. Great Plugin Michael, I would like to use this plugin. I don’t call my table as json format. One day I would like to call them in json but at the moment I just simply use

   foreach ($rowData as $row) : $id = $row->_kpnID; ?><tr class="editable details-control collapsed" data-values="action" id="{{ $id }}"

   and my output looks like this

   					
   1
   152808
   ......
   ...
   
     					
   2
   152868
   

   I was using checkboxes as you can see but I would like to make the checkboxes hidden and select them by clicking the row(s)
   I am not sure how to submit the the id(s) since I am not retrieving the id’s via ajax. Can you help me please? I would appreciate if you could send me a working example which is not getting data via ajax.

   Reply

4. Great Plugin Michael, I would like to use this plugin. I don’t call my table as json format. One day I would like to call them in json but at the moment I just simply use

   foreach ($rowData as $row) : $id = $row->_kpnID; ?><tr class="editable details-control collapsed" data-values="action" id="{{ $id }}"…

   and my output looks like this

   1
   152808
   ……
   …

   2
   152868

   I was using the checkboxes as you can see but I would like to make the checkboxes hidden and select them by clicking the row(s)
   I am not sure how to submit the the id(s) since I am not retrieving the id’s via ajax. Can you help me please? I would appreciate if you could send me a working example which is not getting data via ajax.

   Reply

5. Hi, I love the plugin. I want to be able to select a single row instead of multiple rows. When I include the option select{ style: 'single'}, it selects a single row if I click on the table row but if I click the checkboxes it can select multiples.

   Reply

   1. Reynaldo, checkboxes are meant for multiple selection, you might want to remove checkbox column altogether since it doesn’t make sense with single row selection. Although with the most recent version of the plug-in it may be possible to achieve what you want if you remove “select all” control, see this example for code and demonstration.

      Reply

6. Is there any proper way to wrap the input checkboxes?

   Something like this:

   <label><input type="checkbox" class="dt-checkboxes"></label>

   Thanks!

   Reply

   1. There is a way to customize appearance by using render option. However there seems to be some bug with label-wrapping the input, and it becomes unclickable, see this example. I will try to correct the issue as soon as possible and will follow-up here.

      Reply

      1. Thank you!! Looking forward to test it!

         Reply

   2. There seems to be weird issue with label element in the column containing checkbox. Currently the workaround is either to use CSS #example label { pointer-events: none; }, see this example or updated checkbox plugin. I updated it yesterday but it requires the latest DataTables and Select extension, see this example.

      Reply

      1. Very nice! Thank you! I’ll give a try with this example. Do you think I can add the same to the ‘select all’ (dt-checkboxes-select-all) checkbox as well in the thead?

         Reply

         1. A hacky way to do it would be by using initComplete option, see this example.

            Reply

            1. Amazing!! Thank you very much Michael for the help!

               Reply

7. Hi,

   It really looks great.
   I can see so many applauds but i cannot download the pluggin..404 not found error comes.

   Is it not available anymore?

   Reply

   1. Thanks for reporting this issue. I have corrected the download link, please try again. Thank you!

      Reply

      1. Thanks Michael.

         I really appreciate it.

         Reply

8. Hello,

   Is there any way to change/edit the messages to custom one?
   I mean when it’s saying “2 rows selected” to “2 elements selected” or something.
   Now I changed it in the min.js but I know that’s not the best way to do it.

   Reply

   1. Simon,

      You can use the following set of options:

      'language': {
         'select': {
            'rows': {
               _: '%d elements selected',
               0: '',
               1: '%d element selected'
            }
         }
      },
      

      See this example for code and demonstration.

      Reply

      1. Works like a charm! Thank you!

         Reply

9. how can i get what i selected！

   Reply

   1. Use column().checkboxes.selected() API method that is demonstrated both on this page and on project page.

      For example:

      
      var data = $('#example').DataTable().column(0).checkboxes.selected();
      

      Reply

10. Hello Michael Ryvkin,

    I follow from example but I fail some bit. How can I highlight the selected row when I select the checkbox?

    Here’s a part from my code. (Everything work fine except this point)

    
                var table_id = $('#table_id').DataTable({
                   'ajax': {
                      'url' : 'customer.txt'
                   },
                   'columnDefs': [{ 
                      'targets'      : 0,
                      'checkboxes'   : {
                         'selectAll' : true,
                         'selectRow' : true
                      }
                   }], // hide sort icon on header of first column
                   'select': {
                      'style'     : 'multi',
                      'selector'  : 'checkbox'
                   },
                   'order': [[1, 'asc']]
                });
    

    Reply

    1. If you only want to select rows using checkbox, use 'selector': 'td:first-child' for first cell or 'selector': 'input[type="checkbox"]' for checkbox instead. However I would remove this option altogether is it’s not user-friendly.

       Reply

       1. I both try with
          ‘select’: {
          ‘style’ : ‘multi’,
          ‘selector’ : ‘checkbox’
          },
          and
          ‘select’: {
          ‘style’ : ‘multi’,
          ‘selector’ : ‘input[type=”checkbox”]’
          },
          but it doesn’t work for me, Did you already removed it sir?

          Reply

          1. See this example or this example if you need row selection by first column or checkbox only.

             Reply

             1. Dear Michael,
                I found the root cause. I include the wrong css file. You’re so nice, Thank you very much.

                Reply

11. Hi Michael,

    Thanks for the great plugin.

    1. We are facing one issue, we set below column def:
    { ‘targets’: 0, ‘checkboxes’: {‘selectAllPages’: false}}
    If we check the header checkbox for the first page and move to 2nd page then header checkbox again shows as checked for the 2nd page. And if we then uncheck header checkbox for the 2nd page and move again back to 1st page then header checkbox for the 1st page will also be shown unchecked. How to fix this?

    2. Also, where to store some row specific ID values like EmployeeID and get these values for processing?

    Thank you

    Reply

    1. Mark, thanks for your appreciation!

       • I can’t replicate the problem. What version of the Checkbox plug-in are you using? Can you please demonstrate the problem using this example as a starting point?
       • Use table.rows({ selected: true }).data() to get full dataset for selected rows if you’re using Select extension. See rows_data in this this example.

       Reply

       1. Michael,

          Thanks for quick reply. I tried to implement your below example:
          https://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/styling/icheck/

          I just made one change and set ‘selectAllPages’: false, but if I check header checkbox then it checks the checkboxes of all pages instead of current page. I am not familiar with jsfiddle, so I created a sample page. Can you please review my sample link below:

          http://dnsczar.com/

          1. Can you please let me know how to fix this.

          2. Also, I added Select plugin to the page but not sure why row is not shown as selected if checkbox is checked.

          Thank you.

          Reply

          1. Mark, both issues happen because column containing checkboxes must have unique data, see Known Limitations. As soon as you supply some unique ID for each cell containing checkboxes, it should work as expected.

             Reply

       2. Hi Michael,

          Please ignore my previous replies.

          Reply

12. Hi Michael, if I had the data with an attribute for example state that can be 0 or 1 and those that have as value 1 load already selected as could make such functionality. Thank you very much for your reply.

    Reply

13. Hi Michael,

    Please ignore my previous replies. I am trying to implement your below example:
    https://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/styling/icheck/

    I also made a sample page below:
    http://dnsczar.com/

    It has 2 issues:
    1. I set ‘selectAllPages’: false and still clicking header checkbox it checks the checkboxes of all pages instead of current page.
    2. Also, my sample shows incorrect “rows selected” count at the bottom. I found that if I set the “ajax” option then it shows correct count. Currently my project is not using ajax option and instead directly table result is returned. How to fix this issue.

    You have a very good plugin and it will be great if above 2 issues can be fixed. Thank you.

    Reply

    1. Let me review your example today and I will get back to you.

       Reply

    2. Mark, both issues happen because column containing checkboxes must have unique data, see Known Limitations. As soon as you supply some unique ID for each cell containing checkboxes, it should work as expected.

       Reply

       1. Michael,

          Thanks once again, I am getting closer. I tried to assign a unique ID to each td or tr which has a checkbox but it didn’t work.

          Should I assign a unique ID to each checkbox? If yes, how do I assign a unique ID to each checkbox of the first column. Checkbox is being added by the plugin code and hence I am not sure how to set unique ID to those dynamically added checkboxes.

          Please let me know how this can be done.

          Reply

          1. First cell (<td></td>) should not be empty and have a unique data, for example:

             
             <tr>
                 <td>1</td>
                 <td>Tiger Nixon</td>
                 <td>System Architect</td>
                 <td>Edinburgh</td>
                 <td>61</td>
                 <td>2011/04/25</td>
                 <td>$320,800</td>
             </tr>
             <tr>
                 <td>2</td>
                 <td>Garrett Winters</td>
                 <td>Accountant</td>
                 <td>Tokyo</td>
                 <td>63</td>
                 <td>2011/07/25</td>
                 <td>$170,750</td>
             </tr>
             

             Reply

             1. Thanks Michael,

                1. Adding unique data in of checkbox column fixed my second issue of incorrect “rows selected” count.

                2. But, still my first issue is not fixed. I set ‘selectAllPages’: false and still clicking header checkbox it checks the checkboxes of all pages instead of current page. I have updated my below sample page to have unique data in checkbox column and set ‘selectAllPages’: false.

                http://dnsczar.com/

                I see that you have written additional code for Callbacks and iCheck change events. Does it need some changes?

                Thanks again for your time.

                Reply

                1. Mark, thanks for bringing it up. The issue is in additional code required for iCheck plug-in to select checkboxes on current page only.

                   The solution is to change this line:

                   var col = table.column($(this).closest('th'));

                   to this line:

                   var col = table.column($(this).closest('th'), { 'page': 'current' });

                   Reply

                   1. Great !! That worked !!!

                      Just last couple of questions:

                      1. Checking any row level checkbox also checks the header checkbox. Can this be avoided?

                      2. Also, if I check the header checkbox it will check all the row level checkboxes. Then if I uncheck any of these row level checkboxes, header checkbox is not unchecked. Can this be fixed?

                      You can see these issues in example link as well:

                      https://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/styling/icheck/

                      Thank you

                      Reply

                      1. 1. You can tweak the code in selectAllCallback and make “Select all” control behave as you want it.
                         2. I can’t reproduce this behavior.

                         Reply

          2. You can also use another column as data source for checkboxes column using columns.data option.

             Reply

14. Hi, Michael.

    How can I get data from Controller in Ajax where you are getting from url
    'ajax': 'https://api.myjson.com/bins/1us28'

    I want to get data from db. I can’t understand how to get.

    Reply

    1. Just replace my sample URL with your own URL. In your controller extract data from the database and return it as array of arrays or array of objects in JSON format, see official documentation for more details.

       Reply

15. Please, there is any way that I can mark a select as checked if it is already rendered in the html ?
    I wanna be rendering the table within my php page, and not making another ajax request to populate the datatables
    For example, in the following link I wanna mark rows 3,4,5 as selected.

    Example: https://codepen.io/anon/pen/ZyVggP

    Reply

    1. See updated example where rows can be selected using cells().checkboxes.select() API method when button is clicked.

       For example, the code below selects checkboxes in column 0 of rows 2, 3 and 4.

       
          $("table").DataTable().cells([2, 3, 4], 0).checkboxes.select();
       

       You can also pass tr, td, th nodes or jQuery objects as arguments to cells() API method, see official documentation for more information.

       Reply

16. First of all thanks a lot for your nice tutorial. I am trying to prevent to select multiple rows. I want that if user select new row previous selected row will be unchecked. Need Help. Thanks in advance.

    Reply

    1. Use select.style option and set it to single to enable single row selection.

       See this example for code and demonstration.

       Reply

17. Can I use if to display checkbox ?

    "columns": [
       {   
          'data': test,
          'className': 'dt-head-center dt-body-center',
          //I want using if in here.. 
          if (data  'text') {
             'checkboxes': {
                'selectRow': true,
                'selectAll': true
             }
          }
       }
    ],
    

    Thanks for your cooperation.

    Reply

18. Hi,

    I was wondering how is it possible to set some checkboxes as checked, when datatables comes up initially.
    I have a form which user can change previous selected rows.

    Thank you for your help

    Best Regards
    kourosh

    Reply

    1. You can use this example as a start and use checkboxes.select() instead of checkboxes.disable(). I will add another example for that in a few days.

       Reply

       1. Thank you Michael for your answer!

          I add this line:
          table.cells([2, 3, 4], 0).checkboxes.select();
          in:
          https://codepen.io/anon/pen/ZyVggP
          and it works.

          But it does not in my program.

          I must have done something wrong.

          Any ideas?

          Reply

          1. Most likely you’re loading data via Ajax in your program. If that’s the case, you need to use `initComplete` callback to select checkboxes only after the data has been loaded, see this example. However it doesn’t make sense to check rows based on row indexes (2, 3, 4 in your example).

             If you want to select checkboxes based on the data, see this example.

             Reply

             1. Thanks a lot, Michael.

                Reply

19. Hi Michael, I have some data which should be selected when I load the page, how I can do that?
    For example, there are 1,2,3,4,5,6,7, and 3 & 5 should be selected first before this page load, hope you can understand what I mean, thanks.

    Reply

    1. Please see Select checkboxes on page load example.

       Reply

       1. I got it, thanks, Michael.

          Reply

20. Hi do you have a simple example how a php script would look like which updates the selected rows in a mysql table?

    Reply

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