Problem
Example below demonstrates the problem with a 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 to avoid 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.jshttps://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.cssHighlights
-
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
controlfrom selecting a row.'select': { 'style': 'multi', 'selector': 'td:not(.control)' },
your buttons are off, second example on this page… alignment is off
Plus sign on collapse/expand button looks off to me too, but this is default styling by DataTables, see their official example. Guess I could report an issue for jQuery DataTables.
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
Hi,
I’m new to data tables, I saw you did wonderful job on creating alphabetical search and responsive design.
Can you please combine both alphabetical search and responsive table to into one?
I tried doing that but could not, Can you please tell me how to do that and sample on js fiddle will be highly appreciated.
I wanted to use it on a mobile app, so responsiveness is a must and i also trying to keep alphabets vertically and sticky. any suggestions how to do it?
Many thanks
That would be my next step to make this plug-in responsive. Planning to release a new version in a few weeks.