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 to download the code, view examples and documentation.

You May Also Like

Comments

  1. 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');
            }
    
        });
    
    
    });
    
    });
    
  2. 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.

    1. 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)

      1. 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

  3. 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?

  4. 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.

  5. 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?

Leave a Reply to sathish Cancel 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)

This site uses Akismet to reduce spam. Learn how your comment data is processed.