gpt4 book ai didi

javascript - Jquery 数据表排序图标不显示在标题上

转载 作者:行者123 更新时间:2023-11-28 05:15:20 25 4
gpt4 key购买 nike

如下图所示,如何在表格标题行显示排序图标而不是筛选行?

我使用了 jquery 数据表,它会自动在错误的位置添加这些排序图标。

Wrong position sort icons

这是我的 jquery 代码

    let table = $('#datatable_users');

let oTable = table.dataTable({
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"emptyTable": "No data available in table",
"info": "Showing _START_ to _END_ of _TOTAL_ entries",
"infoEmpty": "No entries found",
"infoFiltered": "(filtered1 from _MAX_ total entries)",
"lengthMenu": "_MENU_ entries",
"search": "Search:",
"zeroRecords": "No matching records found"
},
rowReorder: {},

"order": [
[0, 'asc']
],

"lengthMenu": [
[5, 10, 15, 20, -1],
[5, 10, 15, 20, "All"] // change per page values here
],
// set the initial value
"pageLength": 10,
"dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable
});

这是我的 HTML 代码

<table class="table table-striped table-bordered table-hover table-checkable" id="datatable_users">
<thead>
<tr role="row" class="heading">
<th width="5%"> ID</th>
<th> Name</th>
<th> Phone</th>
<th> Email</th>
<th> IsActive</th>
<th> Join</th>
<th> IsNew</th>
<th> Limit/Day</th>
<th> Booked</th>
<th width="5%"> #</th>
</tr>
<tr role="row" class="filter">
<td><input type="text" class="form-control form-filter input-sm" name="id"/>
</td>
<td> #</td>
<td>
<input type="text" class="form-control form-filter input-sm" name="phone"/>
</td>
<td>
<input type="text" class="form-control form-filter input-sm" name="email"/>
</td>
<td>
<select name="isActive" class="form-control form-filter input-sm">
<option value="">Select...</option>
<option value="pending">active</option>
<option value="closed">Blocked</option>
</select>
</td>
<td>
<div class="input-group date date-picker margin-bottom-5"
data-date-format="dd/mm/yyyy">
<input type="text" class="form-control form-filter input-sm" readOnly
name="order_date_from" placeholder="From"/>
<span class="input-group-btn">
<button class="btn btn-sm default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
<div class="input-group date date-picker" data-date-format="dd/mm/yyyy">
<input type="text" class="form-control form-filter input-sm" readOnly
name="order_date_to" placeholder="To"/>
<span class="input-group-btn">
<button class="btn btn-sm default" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</td>
<td>
<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
<input type="checkbox" class="group-checkable"
data-set="#sample_2 .checkboxes"/>
<span></span>
</label>
</td>
<td>#</td>
<td>#</td>
<td>
<div class="margin-bottom-5">
<button
class="btn btn-sm green btn-outline filter-submit margin-bottom">
<i class="fa fa-search"></i> Search
</button>
</div>
<button class="btn btn-sm red btn-outline filter-cancel">
<i class="fa fa-times"></i> Reset
</button>
</td>
</tr>
</thead>
<tbody>
....
</tbody>

谢谢。

最佳答案

是的,我终于找到了我错过的小配置。它是“orderCellsTop”。我只是将其设置为 true,一切正常。

关于javascript - Jquery 数据表排序图标不显示在标题上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41016114/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com