Javascript 如何禁用对 jQuery.tablesorter 中的列进行排序?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/8942974/
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
How to disable sorting on column in jQuery.tablesorter?
提问by Ishikawa Yoshi
I try to find a way how to disable sorting on column. I use jQuery plugin tablesorter. And by default if you click on header cell it sort column data, but what I need to do if I don't need to use sorting on one or two column in four columns table.
我试图找到一种如何禁用列排序的方法。我使用 jQuery 插件tablesorter。默认情况下,如果您单击标题单元格,它会对列数据进行排序,但是如果我不需要对四列表中的一列或两列进行排序,我需要做什么。
Thanks in advance.
提前致谢。
回答by xpapad
You must pass the appropriate parameters at initialization, for example:
您必须在初始化时传递适当的参数,例如:
{ ...
headers: { 0: { sorter: false} }
}
For more information, check the manual at:
有关更多信息,请查看手册:
回答by imbolc
Also you can use html data attribute:
您也可以使用 html 数据属性:
<th data-sorter="false">...</th>
Or you can use a class:
或者你可以使用一个类:
<th class="sorter-false">...</th>
回答by Brandon Boone
Something like:
就像是:
$('#selector').tablesorter({headers: {0: { sorter: false}}});
This is clearly outlined here: http://tablesorter.com/docs/example-options-headers.html
这里清楚地概述了这一点:http: //tablesorter.com/docs/example-options-headers.html
$(document).ready(function() {
$("#myTable").tablesorter({
// pass the headers argument and assing a object
headers: {
// assign the secound column (we start counting zero)
1: {
// disable it by setting the property sorter to false
sorter: false
},
// assign the third column (we start counting zero)
2: {
// disable it by setting the property sorter to false
sorter: false
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.21.2/js/jquery.tablesorter.min.js"></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.21.2/css/theme.blue.min.css' type='text/css' />
<table id='myTable' cellspacing="1" class="tablesorter-blue">
<thead>>
<tr>
<th>first name</th>
<th>last name</th>
<th>age</th>
<th>total</th>
<th>discount</th>
<th>date</th>
</tr>
</thead>
<tbody>
<tr>
<td>peter</td>
<td>parker</td>
<td>28</td>
<td>.99</td>
<td>20%</td>
<td>jul 6, 2006 8:14 am</td>
</tr>
<tr>
<td>john</td>
<td>hood</td>
<td>33</td>
<td>.99</td>
<td>25%</td>
<td>dec 10, 2002 5:14 am</td>
</tr>
<tr>
<td>clark</td>
<td>kent</td>
<td>18</td>
<td>.89</td>
<td>44%</td>
<td>jan 12, 2003 11:14 am</td>
</tr>
<tr>
<td>bruce</td>
<td>almighty</td>
<td>45</td>
<td>3.19</td>
<td>44%</td>
<td>jan 18, 2001 9:12 am</td>
</tr>
<tr>
<td>bruce</td>
<td>evans</td>
<td>22</td>
<td>.19</td>
<td>11%</td>
<td>jan 18, 2007 9:12 am</td>
</tr>
</tbody>
</table>
回答by Suman Ansari
For single column xpapad is right
对于单列 xpapad 是正确的
For multiple columns disabling sortings
对于禁用排序的多列
headers: { 0: { sorter: false}, 1: {sorter: false}, 2: {sorter: false} }
标头:{ 0: { sorter: false}, 1: {sorter: false}, 2: {sorter: false} }
回答by Hemerson Varela
In tablesorter v2.18.1, you can now target a column by the class name of an element inside of a header; note that the span has the targeted class name in the first name column.
在tablesorter v2.18.1 中,您现在可以通过标题内元素的类名来定位列;请注意,跨度在名字列中具有目标类名称。
HTML
HTML
<table class="tablesorter">
<thead>
<tr>
<th><span class="first-name">First Name</span></th>
...
JS
JS
$("table").tablesorter({
headers: {
'.first-name' : {
sorter: false
}
}
});
In tablesorter v2.0.5and older, only the metadata and headers options methods were available.
在tablesorter v2.0.5及更早版本中,只有 metadata 和 headers 选项方法可用。
In versions 2.3+, columns can be disabled using any of the following methods (they all do the same thing), in order of priority:
在2.3+ 版本中,可以使用以下任何一种方法(它们都做同样的事情)按优先级禁用列:
jQuery data
data-sorter="false"
.<table class="tablesorter"> <thead> <tr> <th data-sorter="false">Age</th> ....
metadata
class="{ sorter: false }"
. (This requires the metadata plugin)headers option
headers : { 0 : { sorter: false } }
.$("table").tablesorter({ headers : { 0 : { sorter: false } })
header class name
class="sorter-false"
.<table class="tablesorter"> <thead> <tr> <th class="sorter-false">Discount</th> ....
disable a column using jQuery data directly, but do it before the table initializes.
$("table thead th:eq(5)").data("sorter", false); $("table").tablesorter(
jQuery 数据
data-sorter="false"
。<table class="tablesorter"> <thead> <tr> <th data-sorter="false">Age</th> ....
元数据
class="{ sorter: false }"
。(这需要元数据插件)标题选项
headers : { 0 : { sorter: false } }
。$("table").tablesorter({ headers : { 0 : { sorter: false } })
头类名称
class="sorter-false"
。<table class="tablesorter"> <thead> <tr> <th class="sorter-false">Discount</th> ....
直接使用 jQuery 数据禁用列,但在表初始化之前执行此操作。
$("table thead th:eq(5)").data("sorter", false); $("table").tablesorter(