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

Example

You May Also Like

Michael Ryvkin

Comments

Leave a Reply Cancel reply

ENJOYED THE ARTICLE?