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

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.