jQuery DataTables – Responsive and Select extensions

Problem

Table below demonstrates the problem with table that uses Responsive and Select extensions using default settings. When child row display control (+) is clicked, row gets selected which is undesirable behavior.

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

Solution

To prevent child row display control from selecting the row, you need to place this control in its own column and configure Select extension from selecting the row when that column is clicked.

Name Position Office Extn. Start date Salary
Name Position Office Extn. Start date Salary
$(document).ready(function() {
   var table = $('#example').DataTable({
      'ajax': 'https://api.myjson.com/bins/qgcu',
      'responsive': {
        'details': {
           'type': 'column',
           'target': 0
        }
      },
      'columnDefs': [
         {
           'data': null,
           'defaultContent': '',
           'className': 'control',
           'orderable': false,
           'targets': 0
         }      
      ],
      'columns': [ 
         { 'data': null }, 
         { 'data': 0 },
         { 'data': 1 },
         { 'data': 2 },
         { 'data': 3 },
         { 'data': 4 },
         { 'data': 5 }
      ],
      'select': {
         'style': 'multi',
         'selector': 'td:not(.control)'
      },
      'order': [[1, 'asc']]
   });   
});

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
https://cdn.datatables.net/v/dt/dt-1.10.12/r-2.1.0/se-1.2.0/datatables.min.js

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

https://cdn.datatables.net/v/dt/dt-1.10.12/r-2.1.0/se-1.2.0/datatables.min.css

Edit on jsFiddle

Highlights

  • Place child row display control in a separate column

    Add new column in your HTML markup and use responsive.details option and other options as shown below.

          'responsive': {
            'details': {
               'type': 'column',
               'target': 0
            }
          },
          'columnDefs': [
             {
               'data': null,
               'defaultContent': '',
               'className': 'control',
               'orderable': false,
               'targets': 0
             }      
          ],
    
  • Exclude new column from selecting a row

    Use select.selector option to exclude new column with class control from selecting a row.

          'select': {
             'style': 'multi',
             'selector': 'td:not(.control)'
          },
    

Related posts

Comments

      1. Hi sir, Thank you for your post. I am using searching in my gridview Jquery datatable plugin it works fine but when page postbacks it is not working plug -in is not working please tell me

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)