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

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)

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