table tables with tablesorter only sorts one way

Question

当试图从排序中禁用两列时，此代码会执行此操作，但其他列似乎只是按一个方向排序，无论您单击多少次。当你使用调试模式时，你会发现它实际上是两次排序，与之相反，然后返回到原来的位置。如果在点击标题时按住Shift键，它将正常工作。该tablecloth.js文档说：“如果你想传递的自定义参数的tablesorter插件，分别调用.tablesorter（）你的表对象”，所以这是我写的代码：

<script> 
    // jQuery Document Ready Function 
     $(document).ready(function() { 
      $("table").tablecloth({ 
       theme: "default", 
       bordered: true, 
       striped: true, 
       sortable: true 
      }); 
      $("table").tablesorter({ 
       // Turn off some sorting (columns are zero based) 
       headers: { 3: { sorter: false }, 
          7: { sorter: false } } 
      }); 
     }); 
    // END jQuery Document Ready Function 
</script> 

下面是示例表：

<TABLE class="tablecloth" style="width:95%"> 
<thead> 
<tr> 
    <th title="Sort by Client Name" style="background-color:lightgrey;text-align:center">Client Name</th> 
    <th title="Sort by Rush" style="background-color:lightgrey;text-align:center">Rush?</th> 
    <th title="Sort by Service" style="background-color:lightgrey;text-align:center">Service</th> 
    <th style="background-color:lightgrey;text-align:center">Requestid/<br>Lineitemid</th> 
    <th title="Sort by Name" style="background-color:lightgrey;text-align:center">Name</th> 
    <th title="Sort by Due Date" style="background-color:lightgrey;text-align:center">Due Date</th> 
    <th title="Sort by Last Touched" style="background-color:lightgrey;text-align:center">Last Touched</th> 
    <th style="background-color:lightgrey;text-align:center">Notes</th> 

</tr> 
</thead> 

<tbody> 

     <tr> 
     <td><font face=arial size=2>TYCHO</td> 
     <td><font face=arial size=2> 

      RUSH!!!! 
     </td>    
     <td><font face=arial size=2>OFAC 
     </td> 

     <td><font face=arial size=2>2126976/<br>10141879</td> 
     <td><font face=arial size=2>LAST NAME,&nbsp;FIRST NAME</td> 
     <td><font face=arial size=2>8/29/2013 1:00:00 PM</td> 
     <td><font face=arial size=2>9/3/2013 10:30:43 AM</td> 
     <td><font face=arial size=2>test</td> 
     </tr> 

     <tr> 
     <td><font face=arial size=2>LANDSAF</td> 
     <td><font face=arial size=2> 
     </td>    
     <td><font face=arial size=2>LDP 
     </td> 

     <td><font face=arial size=2>2117280/<br>10098096</td> 
     <td><font face=arial size=2>TEST,&nbsp;TEST</td> 
     <td><font face=arial size=2>8/15/2013 1:00:00 PM</td> 
     <td><font face=arial size=2>8/26/2013 12:39:06 PM</td> 
     <td><font face=arial size=2>TEST </td> 
     </tr> 

     <tr> 
     <td><font face=arial size=2>LANDSAF</td> 
     <td><font face=arial size=2> 
     </td>    
     <td><font face=arial size=2>OFAC 
     </td> 

     <td><font face=arial size=2>2117280/<br>10098097</td> 
     <td><font face=arial size=2>TEST,&nbsp;TEST</td> 
     <td><font face=arial size=2>8/15/2013 1:00:00 PM</td> 
     <td><font face=arial size=2>8/26/2013 12:39:32 PM</td> 
     <td><font face=arial size=2>TEST </td> 
     </tr> 

     <tr> 
     <td><font face=arial size=2>LANDSAF</td> 
     <td><font face=arial size=2> 
     </td>    
     <td><font face=arial size=2>OIG 
     </td> 

     <td><font face=arial size=2>2117280/<br>10098098</td> 
     <td><font face=arial size=2>TEST,&nbsp;TEST</td> 
     <td><font face=arial size=2>8/15/2013 1:00:00 PM</td> 
     <td><font face=arial size=2>8/26/2013 12:39:46 PM</td> 
     <td><font face=arial size=2>TEST </td> 
     </tr> 
</tbody> 
</TABLE> 

任何想法？

Answer 1

我从来没有使用桌布，但从查看源代码，如果您将sortable选项设置为true它会自动初始化tablesorter。

因此，要使它们一起正常工作，请将sortable选项保留为false，然后只需将类名称headerSortable添加到每个th即可。像这样的东西（demo）：

如果您使用的是原始版本的tablesorter的（V2.0.5从tablesorter.com），然后添加cssHeader选项，如下所示：

$(function() { 
    $("table").tablecloth({ 
     theme: "default", 
     bordered: true, 
     condensed: true, 
     striped: true, 
     sortable: false 
    }); 

    $('table').tablesorter({ 
     cssHeader: 'headerSortable header' 
    }); 
}); 

，如果你碰巧使用我的fork of tablesorter，然后在cssHeaders的header类的名称应与tablesorter-header

cssHeaders : 'headerSortable tablesorter-header', 

而且因为你很可能不使用INC取代luded的tablesorter css文件，你需要包含一些CSS来排序箭头添加到标题：

.tablesorter .header, 
.tablesorter .tablesorter-header { 
    background-position: center right; 
    background-repeat: no-repeat; 
    cursor: pointer; 
    white-space: normal; 
    padding: 4px 20px 4px 4px; 
    /* black (unsorted) double arrow */ 
    background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==); 
    /* white (unsorted) double arrow */ 
    /* background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAAP///////yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==); */ 
} 
.tablesorter thead .headerSortUp, 
.tablesorter-default thead .tablesorter-headerAsc { 
    /* black asc arrow */ 
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7); 
    /* white asc arrow */ 
    /* background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7); */ 
} 
.tablesorter-default thead .headerSortDown, 
.tablesorter-default thead .tablesorter-headerDesc { 
    /* black desc arrow */ 
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7); 
    /* white desc arrow */ 
    /* background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7); */ 
} 

，但由于你的问题具有一定的列进行排序禁止，桌布似乎并不支持这一点，你将需要从列中删除这些额外的头类名称。在这种情况下，只需在初始化tablesorter之前添加类名称（此脚本将同时适用于旧版本和新版本的tablesorter; demo）：

$("table").tablecloth({ 
    theme: "default", 
    bordered: true, 
    condensed: true, 
    striped: true, 
    sortable: false 
}); 

var disabledColumns = [0, 2]; 

$('table').find('thead th').each(function(i){ 
    if (disabledColumns.indexOf(i) < 0) { 
     $(this).addClass('header headerSortable'); 
    } 
}); 

$('table').tablesorter({ 
    cssHeader: '', 
    headers: { 
     0 : { sorter: false }, 
     2 : { sorter: false } 
    } 
});