即使被禁用,数据表排序 asc 图标仍然出现在第一列
Datatable sorting asc icon still appear on first column even being disabled
您好,我有以下 table 设计。我不希望第一列和最后一列是 sortable。我已经设置 accordingly.But 图标 asc 仍然出现在第一列但不出现在最后一列。但是当我尝试对第二列进行排序时,它会消失。
<table id="userTable" name='userTable' class="table table-striped table-bordered bootstrap-datatable " data-column-defs='[{"sortable": false, "targets": [0,3]}]' style='table-layout: fixed;'>
<thead>
<tr>
<th class="no-sort" style='width: 10%;'>No.</th>
<th style='width: 25%;'>First Name</th>
<th style='width: 20%;'>last Name</th>
<th style='width: 25%;'>Details</th>
</tr>
</thead>
</table>
即使您禁用列排序,数据表排序 order
仍然存在。默认情况下 order
是 [0, 'asc']
;只需将 order
设置为定位 #2 列即可:
var table = $('#example').DataTable({
//....
order: [[ 1, "asc" ]] //column indexes is zero based
})
演示 -> http://jsfiddle.net/6k26o7mk/
或者如果您根本不需要任何默认顺序,则使用 order: []
(图标将隐藏,直到用户对 table 进行排序)。
我无法使用数据表下载生成器
在数据表版本:1.10.11上使用此功能
在这种情况下,我使用 jQuery 作为解决方法来删除排序 class,这反过来会删除图标。
$(document).ready(function () {
$('#my-dataTables').DataTable({
paging: false,
ordering: false,
info: false,
});
// Removes icon
$('.sorting_asc').removeClass('sorting_asc');
});
在版本 1.10.20 中,它对我来说就像这样:
$(document).ready(function(){
$('#example').DataTable({
ordering: false, //disable ordering
initComplete: function( settings, json ) {
$("th").removeClass('sorting_desc'); //remove sorting_desc class
}
});
});
<link href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<table id="example" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
您好,我有以下 table 设计。我不希望第一列和最后一列是 sortable。我已经设置 accordingly.But 图标 asc 仍然出现在第一列但不出现在最后一列。但是当我尝试对第二列进行排序时,它会消失。
<table id="userTable" name='userTable' class="table table-striped table-bordered bootstrap-datatable " data-column-defs='[{"sortable": false, "targets": [0,3]}]' style='table-layout: fixed;'>
<thead>
<tr>
<th class="no-sort" style='width: 10%;'>No.</th>
<th style='width: 25%;'>First Name</th>
<th style='width: 20%;'>last Name</th>
<th style='width: 25%;'>Details</th>
</tr>
</thead>
</table>
即使您禁用列排序,数据表排序 order
仍然存在。默认情况下 order
是 [0, 'asc']
;只需将 order
设置为定位 #2 列即可:
var table = $('#example').DataTable({
//....
order: [[ 1, "asc" ]] //column indexes is zero based
})
演示 -> http://jsfiddle.net/6k26o7mk/
或者如果您根本不需要任何默认顺序,则使用 order: []
(图标将隐藏,直到用户对 table 进行排序)。
我无法使用数据表下载生成器
在数据表版本:1.10.11上使用此功能在这种情况下,我使用 jQuery 作为解决方法来删除排序 class,这反过来会删除图标。
$(document).ready(function () {
$('#my-dataTables').DataTable({
paging: false,
ordering: false,
info: false,
});
// Removes icon
$('.sorting_asc').removeClass('sorting_asc');
});
在版本 1.10.20 中,它对我来说就像这样:
$(document).ready(function(){
$('#example').DataTable({
ordering: false, //disable ordering
initComplete: function( settings, json ) {
$("th").removeClass('sorting_desc'); //remove sorting_desc class
}
});
});
<link href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<table id="example" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>