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.

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.

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

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