jQuery DataTables: How to add a checkbox column

Update
January 15, 2016
See jQuery DataTables Checkboxes plug-in that makes it much easier to add checkboxes and multiple row selection to a table powered by jQuery DataTables. It works in client-side and server-side processing modes, supports alternative styling and other extensions.

Example

Client-side processing mode with Ajax sourced data

Example below shows a table in client-side processing mode where data is received from the server via Ajax request.

Name Position Office Extn. Start date Salary
Name Position Office Extn. Start date Salary

Data submitted to the server:


$(document).ready(function (){
   var table = $('#example').DataTable({
      'ajax': {
         'url': '/lab/articles/jquery-datatables-how-to-add-a-checkbox-column/ids-arrays.txt' 
      },
      'columnDefs': [{
         'targets': 0,
         'searchable': false,
         'orderable': false,
         'className': 'dt-body-center',
         'render': function (data, type, full, meta){
             return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
         }
      }],
      'order': [[1, 'asc']]
   });

   // Handle click on "Select all" control
   $('#example-select-all').on('click', function(){
      // Get all rows with search applied
      var rows = table.rows({ 'search': 'applied' }).nodes();
      // Check/uncheck checkboxes for all rows in the table
      $('input[type="checkbox"]', rows).prop('checked', this.checked);
   });

   // Handle click on checkbox to set state of "Select all" control
   $('#example tbody').on('change', 'input[type="checkbox"]', function(){
      // If checkbox is not checked
      if(!this.checked){
         var el = $('#example-select-all').get(0);
         // If "Select all" control is checked and has 'indeterminate' property
         if(el && el.checked && ('indeterminate' in el)){
            // Set visual state of "Select all" control 
            // as 'indeterminate'
            el.indeterminate = true;
         }
      }
   });

   // Handle form submission event
   $('#frm-example').on('submit', function(e){
      var form = this;

      // Iterate over all checkboxes in the table
      table.$('input[type="checkbox"]').each(function(){
         // If checkbox doesn't exist in DOM
         if(!$.contains(document, this)){
            // If checkbox is checked
            if(this.checked){
               // Create a hidden element 
               $(form).append(
                  $('<input>')
                     .attr('type', 'hidden')
                     .attr('name', this.name)
                     .val(this.value)
               );
            }
         } 
      });
   });

});

In addition to the above code, the following Javascript library files are loaded for use in this example:

//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js

The following CSS library files are loaded for use in this example to provide the styling of the table:

//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css

Edit on jsFiddle

Highlights

Javascript

  • Columns definition

          'columnDefs': [{
             'targets': 0,
             'searchable':false,
             'orderable':false,
             'className': 'dt-body-center',
             'render': function (data, type, full, meta){
                 return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
             }
          }],
    

    Option columnsDef is used to define appearance and behavior of the first column ('targets': 0).

    Searching and ordering of the column is not needed so this functionality is disabled with searchable and orderable options.

    To center checkbox in the cell, internal DataTables CSS class dt-body-center is used.

    Option render is used to prepare the checkbox control for being displayed in each cell of the first column. We use a trick with $('<div/>').text(data).html() to encode HTML entities that could be present in the data.

    Another trick here is to give input element a name with square brackets (id[]). This will make handling of list of checked checkboxes easier on the server-side. For example, PHP will convert all these parameters to an array, see PHP FAQ: How do I get all the results from a select multiple HTML tag for more information.

  • Initial sorting order

          'order': [[1, 'asc']],
    

    By default, DataTables sorts the table by first column in ascending order. By using order option we select another column to perform initial sort.

  • “Select all” control

       // Handle click on "Select all" control
       $('#example-select-all').on('click', function(){
          // Get all rows with search applied
          var rows = table.rows({ 'search': 'applied' }).nodes();
          // Check/uncheck checkboxes for all rows in the table
          $('input[type="checkbox"]', rows).prop('checked', this.checked);
       });
    

    We attach event handler to handle clicks on “Select all” control. To retrieve all checkboxes that are present in the table taking into account currently applied filter, we use rows() method using appropriate selector-modifier.

       // Handle click on checkbox to set state of "Select all" control
       $('#example tbody').on('change', 'input[type="checkbox"]', function(){
          // If checkbox is not checked
          if(!this.checked){
             var el = $('#example-select-all').get(0);
             // If "Select all" control is checked and has 'indeterminate' property
             if(el && el.checked && ('indeterminate' in el)){
                // Set visual state of "Select all" control 
                // as 'indeterminate'
                el.indeterminate = true;
             }
          }
       });
    

    The purpose of the event handler above is to detect when one of the checkboxes in the table is unchecked when “Select all” control was checked. When that happens, we can set “Select all” control to a special state indeterminate to indicate that only some checkboxes are checked.

  • Form submission

       // Handle form submission event
       $('#frm-example').on('submit', function(e){
          var form = this;
    
          // Iterate over all checkboxes in the table
          table.$('input[type="checkbox"]').each(function(){
             // If checkbox doesn't exist in DOM
             if(!$.contains(document, this)){
                // If checkbox is checked
                if(this.checked){
                   // Create a hidden element 
                   $(form).append(
                      $('<input>')
                         .attr('type', 'hidden')
                         .attr('name', this.name)
                         .val(this.value)
                   );
                }
             } 
          });
       });
    

    When table is enhanced by jQuery DataTables plug-in, only visible elements exist in DOM. That is why by default form submits checkboxes from current page only.

    To submit checkboxes from all pages we need to retrieve them with $() API method. Then for each checkbox not present in DOM we add a hidden element to the form with the same name and value. This allows all the data to be submitted.

    It’s even more simple if form submission is performed via Ajax. In that case URL-encoded data for submission can be produced using the code below:

    var data = table.$('input[type="checkbox"]').serialize();

    For more information on submitting the form elements in a table powered by jQuery DataTables, please see jQuery DataTables: How to submit all pages form data.

Server-side processing

Please note that the example and code above will work for client-side processing mode only.

In server-side processing mode ('serverSide':true) elements <input type="checkbox"> would exist for current page only. Once page is changed, the checked state of the checkboxes would not be preserved.

See jQuery DataTables Checkboxes for a universal solution that will work for server-side processing mode as well.

You May Also Like

Comments

  1. I can’t display checkbox column in table. How do I I display the checkbox for table from database-server using MySQL instead of Ajax or server-side processing?

  2. Is this available for download on npm?  Would like to use this with jquery datatables in a React.js app.  Thank you

  3. Thank you.  I downloaded jquery-datables-checkboxes from NPM.   I added the “required” statement to my React class code.  The select / deselect checkbox in the table header works great for checking / unchecking the checkboxes in every row on all pages in the table.

    However I have a jquery “on click” selector function in my $Document.ready() function that needs to run whenever a row checkbox is clicked.  This selector worked fine until I added the datatable-checkboxes library to this React class.  The jquery selector I am using looks like:

    $('#myTable').on('click', '.dt-checkboxes', function () {
    ---
    });

    As you can see I am using the class your library provided “dt-checkboxes” in the jquery selector but it does not fire when I click on a checkbox in any table row.

    Is there something that I’m missing here?  Can you suggest a way to get this function to fire whenever a checkbox in a row is clicked on?

    Thank you

  4. 1. Create a button on account to show only contact related to selected account. On button click open VF page

    2. Facility to select the multiple contact from list

    3. add Send email button on Table so user will send an Email to selected Contacts

    4. Pagination should be present for Table

    my requirement is this can i get code using jquery!?

Leave a Reply

(optional)

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