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.

Related posts

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

      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

  2. Hi Michael,

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

    thanks.

  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.

  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.

  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.

    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.

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

    Something like this:

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

    Thanks!

    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.

    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.

      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?

  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?

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)