尽管已排序,但仍将启用的复选框保留在jQuery DataTables的顶部 [英] Keep enabled checkboxes at top of jQuery DataTables, despite sort order
问题描述
我希望我的jQuery DataTable始终在顶部显示已启用复选框行的组,并在下方显示已禁用复选框行的组.到目前为止,我只能通过单击第一个标题标签"clicks"来实现.本质上,我将灰色"类添加到相关行并对其进行排序.问题是,当我对其他标题进行排序时,我无法维持这两个组.使用列过滤器时,我还需要保留顺序.例如,在产品组"下拉过滤器中单击长",应在顶部显示2个启用的长"行,在底部显示1个禁用的长"行.恐怕我对下一步的工作感到困惑和坦率.任何建议,不胜感激.小提琴: https://jsfiddle.net/mxb6vp3b/
I want my jQuery DataTable to always display the group of enabled checkbox rows at the top and the disabled checkbox rows underneath. So far I can only achieve this by clicking on the first header label 'clicks'. Essentially I add the class 'greyed out' to the relevant rows and sort on it. Problem is that I can't sustain those 2 groups when I sort on the other headers. I also need the order to be kept when I use the column filters. For example, clicking on 'Longs' in the 'Product Group' dropdown filter should show the 2 enabled 'Longs' rows at the top and the 1 disabled 'Longs' row at the bottom. I'm afraid I'm confused and frankly out of my depth on next steps. Any advice much appreciated. Fiddle: https://jsfiddle.net/mxb6vp3b/
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"></script>
<script src="https://cdn.datatables.net/select/1.2.0/css/select.dataTables.min.css"></script>
<form id="frm-example" action="/nosuchpage" method="POST">
<table id="example" class="display select" cellspacing="0" width="100%">
<thead>
<tr>
<th>Clicks</th>
<th>Trading Code</th>
<th>Product Group</th>
<th>Product description</th>
</tr>
</thead>
<tbody>
<tr id="row250200">
<td><input id="HS250200" type="checkbox" value="HS 250200" /></td>
<td> 250200 </td>
<td> Longs </td>
<td> Iron Ore - unroasted </td>
</tr>
<tr id="row260111">
<td><input id="HS260111" type="checkbox" value="HS 260111" /></td>
<td> 260111 </td>
<td> Raw Materials - Iron ore </td>
<td> Iron Ore - fines, concentrate, lump </td>
</tr>
<tr id="row730490" class="TypeCarbon_Alloy">
<td><input id="HS730490" type="checkbox" value="HS 730490" /></td>
<td> 730490 </td>
<td> Pipe & tube - Seamless </td>
<td> Seamless tube - other </td>
</tr>
<tr id="row730512" class="TypeCarbon_Alloy">
<td><input id="HS730512" type="checkbox" value="HS 730512" /></td>
<td> 730512 </td>
<td> Longs </td>
<td> Welded tube - line pipe, LW, >406.4mm </td>
</tr>
<tr id="row730230" class="TypeCarbon_Alloy_Stainless">
<td><input id="HS730230" type="checkbox" value="HS 730230" /></td>
<td> 730230 </td>
<td> Longs </td>
<td> Railway Materials </td>
</tr>
<tr id="row721921" class="TypeStainless">
<td><input id="HS721921" type="checkbox" value="HS 721921" /></td>
<td> 721921 </td>
<td> Flats - HR plate </td>
<td> HR plate - discrete or CTL, >10mm </td>
</tr>
</tbody>
</table>
</form>
.grey_out {
color: lightgrey;
}
$(function() {
// Disable all rows
$('#example td input').prop("disabled", true).closest('tr').addClass('grey_out');
// Eanable relevant rows
$("#HS260111, #HS730512, #HS730230").prop("disabled", false).closest('tr').removeClass('grey_out');
$('#example').DataTable({
orderCellsTop: true,
scrollY: '50vh',
scrollCollapse: true,
orderCellsTop: true,
'columnDefs': [{
'targets': 0,
'orderDataType': 'dom-checkbox',
'orderable': true,
}],
"order": [
[0, "asc"]
],
responsive: true,
initComplete: function() {
this.api().columns([1, 2, 3]).every(function() {
var column = this;
var select = $('<select><option value="">Show all</option></select>')
.appendTo($(column.header()))
.on('change', function() {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
}
});
// Sort for Enabled'
$.fn.dataTable.ext.order['dom-checkbox'] = function(settings, col) {
return this.api().column(col, {
order: 'index'
}).nodes().map(function(td, i) {
return $(td).parent().is(':not(.grey_out)') ? '0' : '1';
});
}
});
推荐答案
[...]此选项指定的顺序将始终应用于 表格,与用户互动无关.
[...] the ordering specified by this option will always be applied to the table, regardless of user interaction.
现在将隐藏的列添加到表中,并将其用作orderFixed
的基础:
Now add a hidden column to your table and use that as base for orderFixed
:
var table = $('#example').DataTable({
columnDefs: [
{ targets: 0, visible: false }
],
orderFixed: [0, 'desc']
})
然后在选中或取消选中同级复选框时,使用例如1
和0
更新隐藏的列:
Then update the hidden column with for example 1
and 0
when its sibling checkbox is checked or unchecked :
$('#example').on('click', 'input[type="checkbox"]', function() {
var row = table.row($(this).closest('tr'));
table.cell({ row: row.index(), column: 0 } ).data( this.checked ? 1 : 0 )
row.invalidate().draw()
})
现在,无论用户如何对表进行排序,
已选中"行都将始终排在最前面.
"checked" rows will now always stay on top regardless of how the user sort the table.
为简化起见,我采用了上面的标记并制作了一个新演示-> http://jsfiddle.net/6e56cu8u/
I took the markup above and made a new demo for simplicity -> http://jsfiddle.net/6e56cu8u/
这篇关于尽管已排序,但仍将启用的复选框保留在jQuery DataTables的顶部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!