admin管理员组文章数量:1426017
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;
}
本文标签：
版权声明：本文标题：javascript - How can I display the responsive datatable's expandcollapse icon in the right side of the first column& 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745396752a2656850.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论