jQuery DataTables: Row selection using checkboxes and Select extension

January 15, 2016February 8, 2019 Michael Ryvkin

We will demonstrate universal solution on how to add a checkbox column to a table, allow multiple row selection and ability to select all rows simultaneously using 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.

Michael Ryvkin

Freelance web developer based in Perkasie, Bucks County, PA. I design and develop custom websites and web applications, perform website maintenance and provide technical support for small and medium-sized businesses.

Contact me for a free quote or consultation on your project.

Comments

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');
						}
                    }
                ]
				
            });

Raja says:

October 15, 2017 at 2:16 pm

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 ?

Reply
1. tom says:
  
  October 26, 2017 at 9:23 am
  
  Hi Michael Ryvkin ,
  
  I too need above functionality is that achievable ?
  
  Reply
  1. Michael Ryvkin says:
    
    October 26, 2017 at 9:25 am
    
    That may be possible, I may need some time to do the research.
    
    Reply
    1. tom says:
      
      October 26, 2017 at 9:30 am
      
      ok.
      
      Reply
vee says:

October 19, 2017 at 4:25 am

Hello
is that possible to put “select info” at top of table not at bottom inside div datatable_info ??

Reply
1. Michael Ryvkin says:
  
  October 20, 2017 at 8:10 am
  
  Use dom option to change position of controls. For example, use 'dom': 'lfirtp' instead of default value lfrtip. See this example for demonstration.
  
  Reply

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="..."}}

vas says:

November 16, 2017 at 11:39 pm
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
Reply
Mark says:

November 30, 2017 at 10:54 am
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.
Reply
1. Michael Ryvkin says:
  
  November 30, 2017 at 3:08 pm
  
  The problem is that column containing checkboxes must contain unique values. It is mentioned in the Known Limitation section. See updated example where it works as expected.
  
  Reply
  1. Mark says:
    
    December 1, 2017 at 3:42 am
    
    Oh dear, I got RTFM-d… 😉 I apologize. Thanks for the help. All is fine now.
    
    Reply
Pritesh Sahni says:

December 27, 2017 at 10:13 am

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

Reply
Jamie says:

February 6, 2018 at 4:57 pm

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?

Reply
1. Michael Ryvkin says:
  
  February 6, 2018 at 5:00 pm
  
  Set columns.checkboxes.selectAllPages option to false to select checkboxes on the current page only.
  
  See this example for code and demonstration.
  
  Reply
Alex says:

February 13, 2018 at 5:39 am

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

Reply
1. Michael Ryvkin says:
  
  February 13, 2018 at 1:34 pm
  
  With server-side processing plug-in selects items on current page only anyway. Or do you mean that if user changes page, selection should be removed?
  
  Reply
Denis says:

February 22, 2018 at 3:09 am

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

Reply
Manish Soni says:

April 24, 2018 at 3:46 am

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 ?

Reply

       "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 ?

Mukesh Abdare says:

May 14, 2018 at 2:59 am
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?
Reply
Johnny Uy says:

May 23, 2018 at 4:11 am

How can i get the data of the selected row for example i have to get its primary key??

Reply
obfdev says:

June 4, 2018 at 4:20 pm

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.

Reply
1. Michael Ryvkin says:
  
  June 4, 2018 at 4:21 pm
  
  What error are you getting?
  
  Reply

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']]
});

Michael Ryvkin says:

June 5, 2018 at 7:08 am

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.

Reply

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)
                );
            });

Kenneth says:

July 12, 2018 at 6:40 pm

oh just noticed this was for server side processing. It may not work.

Reply

sikha says:

June 11, 2018 at 3:25 am

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.

Reply
Deivid says:

June 19, 2018 at 5:15 pm

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?

Reply
Martin C says:

June 25, 2018 at 4:33 pm

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

Reply
1. Michael Ryvkin says:
  
  June 26, 2018 at 8:29 am
  
  Martin, thanks for reporting the issue. It has been corrected. Plugin requires DataTables version 1.10.8 or higher.
  
  Reply

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);
                    });
                }

Example

You May Also Like

Michael Ryvkin

Comments

Leave a Reply Cancel reply