I'm using responsive datatable (.html). but the expand/collapse icon is appearing in the left side of the first column's value.
How can I change that to appear in the right side of first column's value.
Also want to change the icon style to use Font Awesome's icon
JS:
$(document).ready( function () {
var table = $('#example').DataTable({
responsive: {
details: {
type: 'column'
}
},
columnDefs: [ {
className: 'control',
orderable: false,
targets: 0
} ],
order: [ 1, 'asc' ]
});
} );
HTML Code:
<!DOCTYPE html>
<html>
<body>
<div class="container">
<table id="example" class="display responsive" width="100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$3,120</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I'm using responsive datatable (https://www.datatables/extensions/responsive/examples/display-control/classes.html). but the expand/collapse icon is appearing in the left side of the first column's value.
How can I change that to appear in the right side of first column's value.
Also want to change the icon style to use Font Awesome's icon
JS:
$(document).ready( function () {
var table = $('#example').DataTable({
responsive: {
details: {
type: 'column'
}
},
columnDefs: [ {
className: 'control',
orderable: false,
targets: 0
} ],
order: [ 1, 'asc' ]
});
} );
HTML Code:
<!DOCTYPE html>
<html>
<body>
<div class="container">
<table id="example" class="display responsive" width="100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$3,120</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
- Please provide a simple code example that duplicates the issue you are experiencing. – Rob Monhemius Commented Mar 9, 2018 at 11:00
- Where's your code? – JoelBonetR Commented Mar 9, 2018 at 11:01
2 Answers
Reset to default 2Move the blank <th></th> to the last column and update the target value to the last as well.
$(document).ready( function () {
var table = $('#example').DataTable({
responsive: {
details: {
type: 'column'
}
},
columnDefs: [ {
className: 'control',
orderable: false,
targets: 5
} ],
order: [ 1, 'asc' ]
});
} );<link href="https://cdn.datatables/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables/responsive/2.2.1/css/responsive.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables/responsive/2.2.1/js/dataTables.responsive.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<div class="container">
<table id="example" class="display responsive" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$3,120</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>`There is a css Selector
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before
which defines the position of the element.
In your css overwrite it:
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before {
left: auto;
right: 4px;
}