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

I have used custom date range filter in datatable. So I have initialize datatable instance in function. Now when I click trigger a function to get the values of checkbox it show me an error that instance variable is not defined.


$(document).ready(function() {
fetch_data();

    function fetch_data(is_date_search = '', date = '', type = '') {
        var table = $('#customerList').DataTable({
            "processing": true,
            "serverSide": true,
            "select": {
                 'style': 'multi'
            },
            "order": [],
            "ajax": {
                "url": "",
                "type": "POST",
                "data": {
                    is_date_search: is_date_search,
                    date: date,
                    type: type
                }
            },
             "columnDefs": [{
                "targets": 0,
                'searchable': false,
                'orderable': false,
                'checkboxes': {
                   'selectRow': true
                }
                // 'className': 'dt-body-center',
                // 'render': function (data, type, full, meta){
                //      return '<input type="checkbox" name="id[]" class="theClass" value="' + $('').text(data).html() + '">';
                //  }
            },
            {
                "name": "sr_no",
                "targets": 1
            },
            {
                "name": "c.name",
                "targets": 2
            },
            {
                "name": "c.mobile",
                "targets": 3
            },
            {
                "name": "c.email",
                "targets": 4
            },
            {
                "name": "c.birthdate",
                "targets": 5
            },
            {
                "name": "c.anniversary_date",
                "targets": 6
            },
            {
                "name": "c.created_at",
                "targets": 7
            },
            {
                "name": "feedback_count",
                "targets": 8
            },
            {
                "name": "rewards_points",
                "targets": 9
            },
            {
                "name": "coupons",
                "targets": 10
            },

        ]
        });

        //draw table
        table.columns().every(function() {
            var table = this;
            $('input', this.header()).on('keyup change', function() {
            console.log(table.search());
                if (table.search() !== this.value) {
                    table.search('')
                    table.columns().search('')
                    table.search(this.value).draw();  
                }
            });
        });
    }


    //tooltip




    var start = moment().subtract(29, 'days');
    var end = moment();

    function cb(start, end) {
        $('#birthdate_picker').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        $('#anniversary_date').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        $('#created_at').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    }

    $('#birthdate_picker').daterangepicker({
        startDate: start,
        endDate: end,
        ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')]
        }
    }, cb);


    cb(start, end);




    $(document).on('click','#message_to_send', function() {
        // var selectedIds = table.columns().checkboxes.selected()[0];

        // if (selectedIds != '') {
        //     $('#messageForm')[0].reset();
        //     $('#message_model').modal('show');
        // } else {
        //     alert('Please Select At least one contact number');
        // }
       var checkbox_value = [];
        var rows_selected = table.column(0).checkboxes.selected();
        // var rowcollection =  oTable.$(".dt-checkboxes:checked", {"page": "all"});
        rows_selected.each(function(index,elem){
            checkbox_value.push($(elem).val());
        });
        console.log(checkbox_value);

    });





    $('#birthdate_picker').on('change', function() {
        var birthdate = $('#birthdate_picker').val();

        if (birthdate) {
            $('#customerList').DataTable().destroy();
            fetch_data('yes', birthdate, 'c.birthdate');
        } else {
            alert('Date is required');
        }

    });


});

});

pankaj gupta says:

December 27, 2019 at 7:03 am

how to selected chacbox only valid data invalid data not select and submit only valid data table plz hlp me

Reply
R yahya says:

January 11, 2020 at 7:04 pm

Hai mr, how to get name or other rows values in this table ?
Please

Reply
sathish says:

January 20, 2020 at 4:26 am
```
var rows_selected = table.column(0).checkboxes.selected();
```
With this the id will be fetching perfectly.
But, By checking the multiple check box or single check box i need the column, such as “name” or “position” with separated by comma,with respect to the checkbox checked on the particular rows.

I tried with,
```
var rows_selected = table.column(1).checkboxes.selected();
```
or
```
var rows_selected= table.columns().checkboxes.selected()[0][1];
```
Nothing will happen, please help me.
Reply
1. Prabu Chidambaram says:
  
  February 21, 2020 at 2:52 am
  Please assign the variable globally
  
  example:
```
var tbl;

tbl = $('#Reportpolicy').DataTable(

then 
  function getSelected()
    {
        var selectedIds = tbl.columns().checkboxes.selected()[0];
        console.log(selectedIds)

        selectedIds.forEach(function (selectedId) {
            alert(selectedId);
        });
    }
```
  if you have any doubts, whatsapp me (+601133269433)
  Reply
  1. Luca says:
    
    March 27, 2020 at 12:43 pm
    
    Hi Prabu I tried your code but I’m not able to get value or a column different from the id one.
    For example I would to get value of the column with index 10 of the row checked. How can I do this? And if the column could be hidden?
    
    Thanks
    
    Reply
Jonatan Felipe Siqueira says:

March 2, 2020 at 8:21 am

Hello Michael,
My name is Jonatan I’m from Brazil, first thanks for the library.
I am trying to deselect all checkboxes using server side, is there any way to do this?

Reply
1. Michael Ryvkin says:
  
  March 2, 2020 at 4:11 pm
  
  There is column().checkboxes.deselectAll() API method that you can call to deselect all checkboxes. For example $('#example').DataTable().column(0).checkboxes.deselectAll(), where example is the ID of your table and 0 is zero-based index of the column containing checkboxes.
  
  Reply
Jacob says:

March 5, 2020 at 2:48 pm

Hi,

I have implemented below example:

https://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/styling/icheck/

But it has 2 issues which we need to fix:

1. Checking any row level checkbox also checks the header checkbox. Can this be avoided?

2. Also, if I check the header checkbox it will check all the row level checkboxes. Then if I uncheck any of row level checkbox, header checkbox is still checked and it should be unchecked. Can this be fixed?

Both these issues are present in your above icheck example link.

Thanks for great plugin.

Reply
Hardik Bhavsar says:

March 23, 2020 at 3:32 pm

I tested this code with Data table DataTables 1.10.16 and it gives me an error “Uncaught TypeError: Cannot read property ‘info’ of undefined”, is there any suggestions to solve that?

Reply
1. Michael Ryvkin says:
  
  March 23, 2020 at 10:19 pm
  
  Some of my examples currently use DataTables 1.10.16. Can you please create an example or share a link to your project to demonstrate the problem?
  
  Reply
Anders Baumann says:

April 3, 2020 at 12:40 am

Hi Michael.
Great work with the “Datatables Checkboxes”.
Are you aware that all the tables in the “Examples” section are empty? https://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/

Thanks,
Anders

Reply
1. Michael Ryvkin says:
  
  April 3, 2020 at 8:10 am
  
  Thank you for letting me know! I was hosting JSON files on third-party website which is now down.
  
  Reply
  1. Anders Baumann says:
    
    April 8, 2020 at 2:51 am
    
    Hi Michael.
    You are welcome. It also looks like all the links in the API reference are broken:
    https://www.gyrocode.com/projects/jquery-datatables-checkboxes/reference/api/. It would be great if you could fix it.
    
    Thanks in advance,
    Anders
    
    Reply
    1. Michael Ryvkin says:
      
      April 8, 2020 at 7:03 am
      
      Thanks for noticing but the links are not broken. I was going to add more details for each API method similar to Options page but still undecided whether it’s needed.
      
      Reply
raphael says:

April 12, 2020 at 7:56 pm
Hello Michael

Thanks for that great plugin!
I have two questions, one of that is that I suffer from the same problem as Jacob a few posts above me – if I click a random checkbox I get the header one selected.
The second one is, that I cannot use the “stateSave”: true option correctly (this is why I actually came here from datatables.net) – I do not use a reload button, but have it all in a setInterval() to update the data dynamically as proposed on datatables.net.

included:
```
https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js
//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js
//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css
//gyrocode.github.io/jquery-datatables-checkboxes/1.2.11/css/dataTables.checkboxes.css//gyrocode.github.io/jquery-datatables-checkboxes/1.2.11/js/dataTables.checkboxes.min.js">
```
Reply

Hi Michael

Thanks for your plugin. I’m trying using it, but I have problems. I don’t want use it for select/unselect rows. My intentions is use it as a field from a datatable in DB (in ordern have or not permissions for doing a action in a role). Therefore, I need ckecked/unchecked the check depending of if source is true or false (in this case my source is a html table).

I thought use your example “Select checkboxes on page load” and modify it. But it’s not working. I cannot check programatically my checkbox. What am I doing wrong?

        $(document).ready(function () {
            let table = $('#tbPermisos').DataTable({
                columnDefs: [
                    {
                        targets: [0, 3, 4, 5],
                        visible: false
                    },
                    {
                        targets: 1,
                        orderable: false
                    },
                    {
                        targets: 2,
                        searchable: false, checkboxes: {
                                selectRow: false,
                                selectAll: false
                            
                        },
                        createdCell: function (td, cellData, rowData, row, col) {
							this.api().cell(td).checkboxes.select();
							
                            //this.api().cell(td).checkboxes.prop('checked', true);
                        },
                    }
                ],               
            });

Michael Ryvkin says:

May 13, 2020 at 7:57 am

German, sorry for the late reply. Please use alternative solution listed on the Select checkboxes on page load Select checkboxes on page load page for selecting checkboxes with HTML data source.

Reply

Hi,

I use the your nice checkbox plugin with jquery datatables plugin. I also use excel button with datatables.

I want to export to excel file only checked rows.

How can I achieve this?

Thanks in advance

Sorry for the late reply. The answer depends on the processing mode you are using.

If you’re using client-side processing mode, built-in excel button has exportOptions exportOptions option. You can use this option to instruct DataTables to export selected rows only. For example:


$('#myTable').DataTable( {
    // ... skipped ...
    buttons: [
        {
            extend: 'excel',
            exportOptions: {
                modifier: {
                    selected: true
                }
            }
        }
    ]
} );

With server-side processing mode it will be more complex.

Thanks for replying.

I use serverSide processing. Because our dataset has too much data.

For this complexity, do you have any sample code for an entry point?

What do you use to handle server-side DataTables requests and how do you produce Excel spreadsheets?

Actually, I used your above option as in DataTables feature. But it doesn’t work.

I use it for log , history, product and etc type of data.

I have generic function that used by many screens.And I can share it below.

var grid = {
    order: [],
    allcount: 0,
    generate: (gridName, columnDefs, exportColumns, url, method, token, isCheck = false, callback) => {
        // debugger;

        $.fn.dataTable.ext.errMode = 'throw';

        let table = $('#' + gridName).DataTable({
            responsive: true,
            //info: false,  //display info part at the bottom=left
            autoWidth: false,
            cache: false,
            scrollCollapse: true,
            paging: true,
            pagingType: 'simple_numbers',
            lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, 'All']],          
            buttons: [
                {
                    extend: 'collection',
                    text: 'Export',
                    buttons: [
                        {
                            extend: 'excel',
                            // text: '<u>E</u>xcel',
                            //text: '<span data-i18n="Rez.lbl-table-excel-button">Export</span>',
                            exportOptions: {
                                columns: exportColumns,                               
                            },
                            // key: {
                            //     key: 'e',
                            //     altKey: true
                            // }
                        },
                    ]
                },
            ],
            "processing": "true",
            "serverSide": "true",
            "ajax": {
                "url": url,
                "data": function (d) {
                    let order = grid.order;
                    let columnIndex = d.order[0].column;

                    return {
                        //searchStrings: [d.search.value],
                        searchStrings: d.search.value !== "" ? d.search.value : [],
                        index: Math.floor(d.start / d.length), //d.draw - 1, 
                        size: (d.length !== -1 ? d.length : parseInt(grid.allcount)),
                        orderBy: order[columnIndex] + (d.order[0].dir === "asc" ? "" : ":D")
                    }
                },
                "beforeSend": xhr => {   //Include the bearer token in header                    
                    //console.log(localStorage.token);
                    xhr.setRequestHeader("Authorization", 'Bearer ' + token);
                },
                contentType: "application/json",
                dataType: "json",
                dataSrc: function (data) {
                    //debugger;

                    //in order to get all records when select 'All' in length menu of datatables
                    grid.allcount = data.Data.Count;

                    data.recordsFiltered = data.Data.Count;
                    data.recordsTotal = data.Data.Count;
                    data.data = data.Data.Items;

                    return data.data;
                }
            },
            columnDefs: columnDefs,
            select: isCheck ? 'multi' : '',     
        });

        return table;
    } 
}

For exporting, I used DataTables export button with its button set from Datatables button.js file.

But , it exported whole data in the list. Not my selected rows.

Malekus says:

May 13, 2020 at 7:06 am

Hi,

I try to do something a little specific, everything works but I have a little CSS bug.

Can you help me please?

I put a link to my code.

https://jsfiddle.net/Maleku/ecj3fog6/12/

Thanks

Reply
1. Michael Ryvkin says:
  
  May 13, 2020 at 7:38 am
  
  Can you please explain what exactly is the problem with your example? Thanks!
  
  Reply
Malekus says:

May 14, 2020 at 5:49 pm

When using pagination, the color of the page doesn’t change.

Reply
1. Michael Ryvkin says:
  
  May 14, 2020 at 9:35 pm
  
  I think you’re not including all the files needed for Bootstrap 4, see Bootstrap 4 example page.
  
  Reply
Nikola says:

May 15, 2020 at 1:17 pm
Hi,

There is the problem with the library. If the ajax response is in format (standard format when we use column names):
```
{"data":[{"id":1,"Name":"Test"},{"id":2,"Name":"Test1"}]}
```
Number of selected rows is always 1, also, tbl header checkbox doesn’t turn into indeterminate (when selectAllPages is false).

Your library probably expect reposnse without column names (array object), and that is the problem

Regards,

Nikola
Reply
1. Michael Ryvkin says:
  
  May 15, 2020 at 1:44 pm
  
  Nikola, plug-in supports data as array of objects as well, please see Javascript (array/objects) page. If you could create an example on jsFiddle, that would help to identify the problem.
  
  Reply
  1. Nikola says:
    
    May 15, 2020 at 2:59 pm
    
    Michael, thank you for a quick response. jsFiddle demo (problem):
    
    https://jsfiddle.net/nsimsic/9bsdq58f/25/
    
    Reply
    1. Michael Ryvkin says:
      
      May 15, 2020 at 3:30 pm
      
      Your column containing checkboxes doesn’t point to any data source because of data: null. Instead use data: "WorkplaceID". See updated example for code and demonstration.
      
      Reply
      1. Nikola says:
        
        May 15, 2020 at 3:55 pm
        
        I didn’t notice that. It works great now. Thank you for your help and plug-in, this is something that jQuery datatables is really needed!
        
        Reply
Bryan G says:

May 20, 2020 at 6:01 pm

Hello Michael,

Thanks for the great plugin. Currently I have a functionality were users can edit text in the content of the cell. Every time multiple edits are made, I need to invalidate the rows so the search functionality is able to detect the changes i.e. .rows().invalidate().draw();

I noticed when this is done, the text at the bottom of the table which lets you know how many rows are selected stops to work. So if even if multiple rows are selected the text still says one row selected. How do I fix this issue. Thanks!

Reply
1. Bryan G says:
  
  May 20, 2020 at 10:09 pm
  
  Resolved this issue by specifying ‘data’ in the columnDef config while creating the Datatable e.g.
  columnDefs: [{ targets: 0, searchable: false, data: “ID”}]
  
  Reply
  1. Michael Ryvkin says:
    
    May 22, 2020 at 7:45 pm
    
    Glad that you were able to figure it out.
    
    Reply
Nikola says:

June 27, 2020 at 7:51 pm

Michael,

1. I have selected 1 row

2. Next, method “table.ajax.reload()” is executed (server-side processing)

3. Next, “dataTable.column(0).checkboxes.selected()” is still showing selected row ID from the first step (it should be empty after calling “table.ajax.reload()”)

Do you have any idea how can i solve this?

Thanks,

Nikola

Reply

Example

You May Also Like

Michael Ryvkin

Comments

Leave a Reply Cancel reply

ENJOYED THE ARTICLE?