Javascript jquery 数据表禁用特定行中的排序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11011335/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery datatable disable sort in specific row
提问by mrrsb
How to disable sorting in specific row/column in jquery datatable using a class?
如何使用类禁用 jquery 数据表中特定行/列的排序？
here's my sample table;
这是我的示例表；
<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>
script;
脚本;
$('.sortable thead tr th.sorting_disabled').livequery(function() {
$(this).removeClass('sorting');
$(this).unbind('click');
});
above code works but if I click to the next column who has a sorting its shows again an arrow. though its not clickable ;(
上面的代码有效，但如果我点击下一个排序的列，它会再次显示一个箭头。虽然它不可点击;(
How can I disable the sorting by using a class and not using/redraw a table.
如何通过使用类而不使用/重绘表格来禁用排序。
回答by Paulo Fidalgo
You can disable the sorting using a class in definition. Just add this code to the datatable initialization:
您可以使用定义中的类禁用排序。只需将此代码添加到数据表初始化中：
// Disable sorting on the sorting_disabled class
"aoColumnDefs" : [ {
"bSortable" : false,
"aTargets" : [ "sorting_disabled" ]
} ]
回答by Alborz
$('#example').dataTable( {
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 1 ] }
]});
That should do it..;)
那应该这样做..;)
回答by elango
try the following answer .it works for me.
尝试以下答案。它对我有用。
<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>
source : http://blog.adrianlawley.com/tablesorter-jquery-how-to-exclude-rows
来源：http: //blog.adrianlawley.com/tablesorter-jquery-how-to-exclude-rows
回答by Can ürek
<th class="sorting_disabled"> </th>
$(document).ready(function () {
$('#yourDataTableDivID').dataTable({
"aoColumnDefs": [
{
"bSortable": false,
"aTargets": ["sorting_disabled"]
}
]
});
});
回答by Farab Alipanah
The only solution:
First add class="sorting_disabled"to any<th>that you want to disable sorting, then add this code to the datatable initialization:
唯一的解决方案：首先添加class="sorting_disabled"到任何<th>要禁用排序的内容，然后将此代码添加到数据表初始化中：
// Disable sorting on the sorting_disabled class
"aoColumnDefs" : [ {
"bSortable" : false,
"aTargets" : [ "sorting_disabled" ]
} ],
"order": [
[1, 'asc']
],
回答by Sasha Farajallah
this code worked for me in react.
这段代码在反应中对我有用。
in row created i added fixed-row class to the row i wanted to stay fixed and not sortable and i drawcallback i hid the row then i appended it to the table itself.
在创建的行中，我将固定行类添加到我想要保持固定且不可排序的行中，并且我绘制回调我隐藏了该行然后我将它附加到表本身。
Hope this works for you:
希望这对你有用：
$(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");
}
});
}
回答by Francisco
As said in the Datatables documentation:
正如数据表文档中所说：
As of DataTables 1.10.5 it is now possible to define initialisation options using HTML5 data-* attributes. The attribute names are read by DataTables and used, potentially in combination with, the standard Javascript initialisation options (with the data-* attributes taking priority).
从 DataTables 1.10.5 开始，现在可以使用 HTML5 data-* 属性定义初始化选项。属性名称由 DataTables 读取并使用，可能与标准 Javascript 初始化选项结合使用（优先使用 data-* 属性）。
Example:
例子：
<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>
I strongly recommend using this approach, as it is more cleaner than others. DataTables 1.10.15 was originally released on 18th April, 2017.
我强烈建议使用这种方法，因为它比其他方法更干净。DataTables 1.10.15 最初于 2017 年 4 月 18 日发布。
回答by Nancy
Without using class, you can follow these steps:
在不使用类的情况下，您可以按照以下步骤操作：
- Remove the row which has to remain unsorted from the body of the table.
- Include the row to be added in the footer of the table if it is the last row.
- 从表的主体中删除必须保持未排序的行。
- 如果是最后一行，则在表的页脚中包含要添加的行。
回答by denis.peplin
I came with almost the same solution like in the question, but I used the "fnHeaderCallback". As far as I understood, it gets called after each header redisplay, so no more worries about 'sorting' class that appears again after clicking on column next to target column.
我提出了与问题几乎相同的解决方案，但我使用了“fnHeaderCallback”。据我了解，它在每次标题重新显示后都会被调用，因此无需再担心单击目标列旁边的列后再次出现的“排序”类。
$('.datatable').dataTable({
"fnHeaderCallback": function() {
return $('th.sorting.sorting_disabled').removeClass("sorting").unbind("click");
}
});
Additional documentation about callbacks: http://datatables.net/usage/callbacks
有关回调的其他文档：http: //datatables.net/usage/callbacks
回答by truly bs
I hope below code works in your case.
我希望下面的代码适用于您的情况。
$("#dataTable").dataTable({
"aoColumns": [{"bSortable": false}, null,{"bSortable": false}]
});
You need to disable sorting via "bSortable" for that specific column.
您需要通过该特定列的“bSortable”禁用排序。
