1

当试图禁用两列排序时，此代码会执行此操作，但无论您单击多少次，其他列似乎都仅在一个方向上排序。当您使用调试模式时，您会看到它实际上排序了两次，与原来相反，然后又回到原来的位置。如果在单击标题时按住 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>

有任何想法吗？

4

1 回答 1

1

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

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

如果您使用的是原始版本的 tablesorter（来自tablesorter.com的 v2.0.5 ），则添加cssHeader如下选项：

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

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

如果您碰巧正在使用我的 tablesorter 分支，则应将其中的header类名cssHeaders替换为tablesorter-header

cssHeaders : 'headerSortable tablesorter-header',

而且由于您可能不使用包含的 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 }
    }
});
于 2013-09-27T18:50:01.017 回答