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

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)