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. Hi,

    Is there anyway to deny multiple checkbox selection? I want my user to select only one checkbox.

    Here is the code:

    
    
                var table = $('.dataTables-example').DataTable({
                    dom: 'lTfgitp',
    				columnDefs: [
    					{targets: 0, checkboxes: {selectRow: true}}
    				],
    				'select': 'single',
                    buttons: [
                        {extend: 'copy'},
                        {extend: 'csv'},
                        {extend: 'excel', title: 'ExampleFile'},
                        {extend: 'pdf', title: 'ExampleFile'},
                        {extend: 'print',
                         customize: function (win){
    						$(win.document.body).addClass('white-bg');
    						$(win.document.body).css('font-size', '10px');
    						$(win.document.body).find('table')
    							.addClass('compact')
    							.css('font-size', 'inherit');
    						}
                        }
                    ]
    				
                });
    
    
  2. Hi All,

    I have requirement of max selection only 50 per , that is either by select all check box or user can check only 50 individually. some please help me in this ?

  3. Hi,
    thanks post the pretty code,
    It can generation checkboxes like this:

    {{input type="checkbox" class="dt-checkboxes"}}

    But, can it add the main ID inside or how we can ensure click which item(s)?
    Is it must be this?

    {{input type="checkbox" class="dt-checkboxes" value-id="101"}}
    {{input type="checkbox" class="dt-checkboxes" value-id="102"}}
    {{input type="checkbox" class="dt-checkboxes" value-id="103"}}
    {{input type="checkbox" class="dt-checkboxes" value-id="..."}}
    
  4. In server side processing jQuery data table ,when I click on header section checkbox it needs to check all the checkboxes in that page and remaining pages .But when I am doing this it selects all the checkboxes in all the pages .But the issue is when I click on any checkbox inside the table also it automatically checking all the checkboxes in all the pages. How can fix it .

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

    I used this code. but without select { 'style':'multi' } code when I click on the header checkbox it is only slecting that page checkboxes but not remaing how can I fix it.

    Thanks

  5. Hi.

    I seem to have an issue but I’m not sure if it’s your plugin 😉 Please check my fiddle: https://jsfiddle.net/markachten/dz2kgmmx/. On selecting both rows the number of selected rows in the information is not updated. Got following references:
    – datatables
    – datatables.select
    – datatables.checkboxes
    What am I doing wrong?

    Only thing I have right now is:

    
      $('table').DataTable({
        'columnDefs': [{
          'checkboxes': {
            'selectRow': true
          },
          'targets': 0
        }],
        'select': {
          'style': 'multi',
          'selector': 'td:first-child'
        },
        'dom': 'tlpi'
      });
    

    Many thanks in advance.

  6. Hi Michael,
    I am using this plugin and its awesome. We have option to Edit the rows for that we are using data table editor plugin. So we can select row(s) by clicking on the row or by clicking on the checkboxes. and when we can edit the rows. The issue is once row is edited and transaction completed still shows the No of rows selected info. I debug the datatables.checkbox.js and found that showInfoSelected() function is getting call when the form is edited and shows the No of rows selected.
    once the row is updated succesfully it should not show the info. Please suggest.

    Thanks,
    Pritesh Sahni

  7. Great plugin, its awesome. Quick q,

    When limiting the datatables to lets say show 10items per page. and lets say i have 300 items.

    Only the first 10 are obvs displayed, when i select all via this plugin, even though you cant see the 290 rows, they still get selected.

    Is there a way to only run the code to select only whats on the users screen?

  8. Hello Michael,
    You have created a great plugin and I am using it in my current project. My data table uses server side processing. Is it possible to disable cross page select? I’d like it to only remember rows selected on active page.

    Thanks.
    Alex

  9. Hello!
    I updated your plugin from 1.1.0 to 1.2.9 and found that .checkboxes.selected() returned always “string” even id was “number”:
    https://gyazo.com/80e8408dc8f272caf1ff871cc0d47cbe ( jquery.dataTables-1.10.10.js , dataTables.select-1.1.0.js, dataTables.checkboxes-1.1.0.js )

    https://gyazo.com/e5c5830d8111d385488147d962df18b4 ( jquery.dataTables-1.10.16.js , dataTables.select-1.2.5.js, dataTables.checkboxes-1.2.9.js )

    In both cases – jquery 3.3.1

  10. Hi all,
    my query is that when I click on select all checkbox only 10 rows should be selected of first page not all the rows.
    is it possible ?

  11.        "buttons": [
                {
                    text: 'All',
                    action: function ( e, dt, node, config ) {
    
                    }
                }
            ],
    

    Is it possible to select all checkboxes in all pages via a custom button like above using server-side processing ?

  12. Hi,
    I am tying to get selected rows by checked checkbox

     var data = table.columns().checkboxes.selected()[0]; 

    But getting an error ‘Uncaught TypeError: Cannot read property ‘selected’ of undefined’
    Can you help me with this?

  13. Can I use this plugin if I am using aurelia and am unable to include the code in a link in an html page?

    when I use npm install I am getting errors when the application compiles.

  14. Hi Michael,

    First of all, great extension! Just what I was looking for. Server-side selecting rows works great.

    I’m having a little trouble with retrieving data across pages server-side though. Retrieving rows and index works fine, but not the actual data associated with those rows. Any help, assistance or tips on how I could go along doing that?

    I’m getting the rows selected by this:

    
    var rows_selected = oTable.column().checkboxes.selected();
    
     $.each(rows_selected, function(index, rowId){
                console.log(index);
                console.log(rowId);
             });
    
    

    This returns all row #’s and index’s. Not sure how to go about returning the actual data associated with those rows. I just need to get the data from one column from each row selected

    My table function is as so:

    
        oTable = jQuery('#example_table').DataTable({
           "bProcessing": true,
           "bServerSide": true,
           "sAjaxSource": ajaxurl+'?action=my_ajax_fn',
           "bDeferRender": true,
           "fnServerData": fnDataTablesPipeline,
           "bScrollInfinite": true,
           "bScrollCollapse": true,
           "sScrollY": "550px",
           'columnDefs': [
           {
               'targets': 0,
               'checkboxes': {
                'selectRow': true
            },
        },
    
        ],
        'select': {
          'style': 'multi'
      },
      'order': [[1, 'asc']]
    });
    
    1. Dave, thanks for your kind words. Yes, one of the undocumented benefits of this plug-in is that row selection works in server-side processing mode as well.

      Regarding the data, it is not currently possible because in server-side processing mode data is only available for current page only, please see this issue on GitHub. It is possible to add this feature but it may have some performance implications and not sure if it is needed at all.

    2. Dave, I ran into the same problem, but I believe I found a solution.

      I defined the column names in Datatables. When I retrieve the data i get the rows that are selected and store it to a variable. I then loop through that variable and stored the values of each of the columns of the selected rows. In my case I stored it to an array and broke it up later. See below to see if it helps. Now if only I can figure out the answer to my question I posted earlier 🙁

      
              var table = $('#MyTable').DataTable({
                  "ajax": {
                      "url": "@Url.Action("LoadAllData", "Partial")",
                      "type": "GET",
                      "datatype": "json",
                  },
                  "columns": [
                      { "data": "ID" },
                      { "data": "Name" },
                      { "data": "Code" },
                      { "data": "TypeID" },
                      { "data": "TypeDescription" }
                  ],........
      
      
                  //Entity Information
                  var tblData = table.rows('.selected').data();
                  var _theData;
                  $.each(tblData, function (i, val) {
                      _theData = tblData[i]["ID"] + "|" +
                                  tblData[i]["Name"] + "|" +
                                  tblData[i]["Code"] + "|" +
                                  tblData[i]["TypeID"] //+ "|" +
                                  tblData[i]["TypeDescription"];
                      $(form).append(
                          $('')
                              .attr('type', 'hidden')
                              .attr('name', 'mydata[]')
                              .val(_theData)
                      );
                  });
      
      
  15. i want a check box on top
    when we check that then only show the search boxes for advance filtering
    when unchecked then it clear the filtration.

  16. We can inform the data in this way?

    “data”: [
    {
    “DT_RowId”: “row_1”,
    “first_name”: “Quynn”,
    “last_name”: “Contreras”,
    “phone”: “1-971-977-4681”,
    “city”: “Slidell”,
    “zip”: “81080”,
    “active”: “0”
    },
    {
    “DT_RowId”: “row_2”,
    “first_name”: “Kaitlin”,
    “last_name”: “Smith”,
    “phone”: “1-436-523-6103”,
    “city”: “Orlando”,
    “zip”: “U5G 7J3”,
    “active”: “1”
    }];

    if it does, it would be possible to demonstrate an example?

  17. Hi Mike,
    You have exactly what I need! Thanks so much! Was trying to run your example, but I cannot download the 4th file in the resource tab — datatables.min.js. The link is broken.
    If I replace it with datatables.min.js I have here (1.10.7), no checkbox is shown either at the top or at row level. Everything else seems displayed ok.
    Can you fix that link or tell me which datatables.min.js version I should be using?

    Again, thanks a lot for your hard work!

    Martin

  18. Hi Michael,

    Is there a way to deselect all checked records through javascript?

    I’m been trying to clear all the selections. I thought of redraw but im not using ajax and passing data through a model.

    this is what I tried to do, however the records are still selected even though I tried to unselect them through javascript.

    // Removes the class to show the items is not selected
                    $('#PermissionTable tbody tr').removeClass('selected');
    // Check if the selectall in header is checked if so uncheck and for each checkbox in table to uncheck as well. Hide the select info data ("# rows selected") text.
                    if ($("#selectallpermissions").is(':checked')) {
                        $("#selectallpermissions").prop('checked', false);
                        $('.select-info').hide()
                        $('tbody tr td input[type="checkbox"]').each(function () {
                            $(this).prop('checked', false);
                        });
                    }
    

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.