如何禁用jQuery.tablesorter中的列排序?

时间:2012-01-20 14:35:03

标签: javascript jquery tablesorter

我试图找到一种方法来禁用列上的排序。我使用jQuery插件tablesorter。默认情况下,如果单击标题单元格,它会对列数据进行排序,但如果我不需要在四列表中的一列或两列上使用排序,我需要做什么。

提前致谢。

5 个答案:

答案 0 :(得分:26)

您必须在初始化时传递适当的参数,例如:

{ ...
   headers: { 0: { sorter: false} }
}

有关详细信息,请查看手册:

http://tablesorter.com/docs/

答案 1 :(得分:19)

您还可以使用html数据属性:

<th data-sorter="false">...</th>

或者您可以使用课程:

<th class="sorter-false">...</th>

答案 2 :(得分:6)

类似的东西:

$('#selector').tablesorter({headers: {0: { sorter: false}}});

这里有清楚的概述: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>$9.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>$19.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>$15.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>$153.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>$13.19</td> 
            <td>11%</td> 
            <td>jan 18, 2007 9:12 am</td> 
        </tr> 
    </tbody> 
</table>

答案 3 :(得分:2)

对于单列xpapad是对的

对于禁用排序的多列

标题:{0:{sorter:false},1:{sorter:false},2:{sorter:false}}

http://tablesorter.com/docs/#Configuration

答案 4 :(得分:0)

tablesorter v2.18.1 中,您现在可以通过标头内元素的类名来定位列;请注意,该范围在“名字”列中具有目标的类名称。

HTML

 <table class="tablesorter">
   <thead>
    <tr>
     <th><span class="first-name">First Name</span></th>
     ...

JS

  $("table").tablesorter({
     headers: {
       '.first-name' : {
       sorter: false
     }
   }
 });

tablesorter v2.0.5 及更低版本中,仅元数据和标头选项方法可用。

版本2.3 + 中,可以使用以下任何一种方法(优先级相同)来禁用列:

  • 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(