j查询数据表禁用特定行中的排序
jquery datatable disable sort in specific row
如何使用类禁用jquery数据表中特定行/列的排序?
这是我的示例表;
<table>
<thead>
<tr>
<th class="sorting_disabled">Title1</th>
<th class="">Title2</th>
<th class="sorting_disabled">Title3</th>
</tr>
</thead>
<tbody>
<tr><td>Tag 1</td><td>Date 1</td><td>Date 2</td></tr>
<tr><td>Tag 2</td><td>Date 2</td><td>Date 2</td></tr>
<tr><td>Tag 3</td><td>Date 3</td><td>Date 3</td></tr>
<tr><td>Tag 4</td><td>Date 4</td><td>Date 4</td></tr>
<tr><td>Tag 5</td><td>Date 5</td><td>Date 5</td></tr>
....
</tbody>
</table>
脚本;
$('.sortable thead tr th.sorting_disabled').livequery(function() {
$(this).removeClass('sorting');
$(this).unbind('click');
});
上面的代码有效,但如果我单击下一列,谁有排序,它再次显示一个箭头。 虽然它不可点击;(
如何通过使用类而不使用/重绘表来禁用排序。
您可以使用定义中的类禁用排序。只需将此代码添加到数据表初始化中:
// Disable sorting on the sorting_disabled class
"aoColumnDefs" : [ {
"bSortable" : false,
"aTargets" : [ "sorting_disabled" ]
} ]
$('#example').dataTable( {
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 1 ] }
]});
那应该可以做到..;)
唯一的解决方案:首先将class="sorting_disabled"
添加到要禁用排序的任何<th>
,然后将此代码添加到数据表初始化中:
// Disable sorting on the sorting_disabled class
"aoColumnDefs" : [ {
"bSortable" : false,
"aTargets" : [ "sorting_disabled" ]
} ],
"order": [
[1, 'asc']
],
如数据表文档中所述:
从DataTables 1.10.5开始,现在可以使用HTML5 data-*属性定义初始化选项。属性名称由DataTables读取,并可能与标准Javascript初始化选项结合使用(data-*属性优先)。
例:
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th data-orderable="false">Start date</th>
<th>Salary</th>
</tr>
</thead>
我强烈建议使用这种方法,因为它比其他方法更干净。DataTables 1.10.15 最初于 2017 年 4 月 18 日发布。
请尝试以下答案.it对我有用。
<table class="tablesorter" id="tmp">
<thead>
<tr>
<th>Area</th>
<th>Total Visitors</th>
</tr>
</thead>
<tbody>
<tr>
<td>Javascript</td>
<td>15</td>
</tr>
<tr>
<td>PHP</td>
<td>3</td>
</tr>
<tr>
<td>HTML5</td>
<td>32</td>
</tr>
<tr>
<td>CSS</td>
<td>14</td>
</tr>
<tr>
<td>XML</td>
<td>54</td>
</tr>
</tbody>
<tfoot>
<tr class="no-sort">
<td><strong>Total</strong></td>
<td><strong>118</strong></td>
</tr>
</tfoot>
来源 : http://blog.adrianlawley.com/tablesorter-jquery-how-to-exclude-rows
<th class="sorting_disabled"> </th>
$(document).ready(function () {
$('#yourDataTableDivID').dataTable({
"aoColumnDefs": [
{
"bSortable": false,
"aTargets": ["sorting_disabled"]
}
]
});
});
我希望下面的代码适用于您的情况。
$("#dataTable").dataTable({
"aoColumns": [{"bSortable": false}, null,{"bSortable": false}]
});
您需要通过该特定列的"bSortable"禁用排序。
$(document).ready(function() {
$('#example').dataTable( {
"aoColumns": [
{ "bSortable": false },
null,
{ "bSortable": false }
]
});
});
我提供了与问题中几乎相同的解决方案,但我使用了"fnHeaderCallback"。据我了解,每次标题重新显示后都会调用它,因此不再担心单击目标列旁边的列后再次出现的"排序"类。
$('.datatable').dataTable({
"fnHeaderCallback": function() {
return $('th.sorting.sorting_disabled').removeClass("sorting").unbind("click");
}
});
有关回调的其他文档:http://datatables.net/usage/callbacks
这段代码在反应中对我有用。
在创建的行中,我将固定行类添加到我想要保持固定且不可排序的行中,并且我抽回了该行,然后将其附加到表本身。
希望这对您有用:
$(this.refs.main).DataTable({
dom: '<"data-table-wrapper"t>',
data: data,
language: {
"emptyTable": "Loading ...",
},
columns,
ordering: true,
order: [0,'asc'],
destory:true,
bFilter: true,
fixedHeader: {
header: true
},
iDisplayLength: 100,
scrollY: '79vh',
ScrollX: '100%',
scrollCollapse: true,
"drawCallback": function( settings ) {
var dataTableId = $("#To_Scroll_List").find(".dataTables_scrollBody table").attr("id");
$("..fixed-row").css('display','none');
$("#"+dataTableId+"_wrapper table").find('tbody tr:last').after($('.fixed-row'));
$(".fixed-row").show();
},
createdRow: function (row, data, index) {
if(data.UnitsPerLine == 999){
$(row).addClass('fixed-row');
}
},
initComplete: function (settings, json) {
$("#To_Scroll_List").find(".dataTables_scrollBodytable").attr("id");
$("#"+dataTableId+" thead tr").remove();
});
DatatableSearch(dataTableId+"_wrapper table", "AverageUnitsPerLineReport");
}
});
}
不使用class,您可以按照以下步骤操作:
- 从表的正文中删除必须保持未排序的行。
- 如果要添加到表的页脚中的行是最后一行,则包括该行。
我做到了,包括下面的代码在drawCallback中:
drawCallback: function(settings) {
let td = $("td:contains('TOTAL')");
if (td.length) {
let row = td.closest('tr');
let clonedRow = row.clone();
row.remove();
$('table tbody').append(clonedRow);
}
}
- 使用JS或新查询对列表进行排序
- 禁用sailsjs查询中的排序
- 数组数据排序类似mysql查询
- j查询排序不起作用
- 当查询可排序丢弃操作结束时,如何得到通知
- 如何使用AngularJS而不是在查询子句中根据两列的差异对表进行排序
- Mongoose,按填充字段对查询进行排序
- 对indexedDB查询的结果进行排序
- j查询数据表禁用特定行中的排序
- AJAX 按查询排序
- j查询日期排序
- JSON 响应未根据 SQL 查询正确排序
- 从 Node.js 中的两个 JavaScript 对象对查询字符串中的参数进行排序
- 是否可以按未查询的维度对谷歌分析数据进行排序
- parse.com-对查询中包含的相关对象进行排序
- 如何将Mongoose排序查询偏移到特定文档之后启动
- 如何替换流星集合查询中的排序关键字字段
- 按HTML表列对查询结果排序
- 多个排序查询参数与Backbone.paginator
- php中的实时排序查询结果