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

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)