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（来自tablesorter.com的v2.0.5），请按以下方式添加cssHeader选项：

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

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

如果您正在使用我的fork of 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 }
    }
});

tableorter桌布只能单向排序

1 个答案: