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 really like this and so does my boss. When I check the select all it works fine for all pages and I can see that by paging through and looking. If I go to page 2 and select a couple of boxes and then go back to page 1 and click my button I am not getting those values. I call a function on button click called SubAll(). I did change the way I get the boxes which is most likely the issue…and #2 when I send the array to my controller method the data is empty, what am I missing? TIA.

    
         var values = [];
    
                $('#timesheet').find('input[type="checkbox"]:checked').each(function (index, rowId) {
                    //this is the current checkbox
                    var temp = $(this).closest('tr').attr('id');
    
                    if (String(temp) === String("undefined")) {
                        //skip; it is the select all box
                    }
                    else {
                        //push to array
                        values.push({ ID: temp });
                    }
                });
    
  2. Hi There,
    I’m facing issues while trying to check checkboxes on page load.
    Scenario – My table loads with the page and also the data in it is added in the jsp page only.After that when i initialise the datatable and use ‘createdCell’ event to check the checkboxes. it gives me an error –
    Uncaught TypeError: Cannot read property ‘isCellSelectable’ of undefined
    at s. (dataTables.checkboxes.min.js:5)
    at s.iterator (jquery.dataTables.min.js:96)
    at s. (dataTables.checkboxes.min.js:5)

    I tried to debug the issue and found that the event is called before the cell is converted into a checkbox as in the function input ‘td’ was – data while when i do the same for a table which is created at runtime the ‘td’ was already converted to a checkbox and had the content –

    I’m not sure if i was able to explain the issue properly, please do give it a look if you could understand.
    Here’s my code –
    JSP –

    
    
    
    #
    SAP ID
    Batch
    Employee Name
    
    
    
    
    
    ${employee.sap_id}
    ${employee.sap_id}
    ${employee.batch_name}
    ${employee.first_name} ${employee.last_name}
    
    
    
    
    

    and JS –

    
    $('#emptable').DataTable({
    	"lengthMenu" : [ [ 5, 10, 20, 30, -1 ], [ 5, 10, 20, 30, "All" ] ],
    	'columnDefs': [{
    		'targets': 0,
    		'checkboxes': {'selectRow': true},
    		'createdCell': function (td, cellData, rowData, row, col){
    			if($("#selected_employees").val().includes(cellData)){
    				this.api().cell(td).checkboxes.select();
    			}
    		}
    	}],
    	'select': {'style': 'multi'},
    	'order': [[1, 'asc']]
    });
  3. When using this code the data is undefined

    $('#Table1').dataTable({
                    'initComplete': function (settings) {
                        var api = this.api();
    
                        api.cells(
                           api.rows(function (idx, data, node) {
                               return (data[1] === 'LU 29/04/2019') ? true : false;
                           }).indexes(),
                           0
                        ).checkboxes.select();
                    },
    
    1. I don’t see a problem with your code. Using callback function as a row selector became only possible in DataTables 1.10.3, check the version that you’re using. Also make sure you’re using array of arrays as your data, and not array of objects. If possible, can you create an example demonstrating the issue on jsFiddle or similar service?

  4. Hey Michael, thx for all your work, it’s really good, but I have one question for u,

    if I already put all data in table(the DOM), how can I selected one checkbox?

    I tried “this.api().cell(td).checkboxes.select();”

    it’s not working, return undefined.

    for some reason I can’t open jsfiddle.net, so I have to ask u here. thx u.

  5. Hey Michael can we disable select all option in table header ? Also will it work fine if I use dialog modal to display datatable ? Please update me if I need to add any additional css ( like Jquery UI ) when using this inside dialog.

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.