jquery - 将 Tablesorter 升级为 Mottie fork

Question

有一个使用 V 1.0.3 的 tablesorter 工作实例，其中一切都仅与选定的列完美配合，在单个列上显示自定义图像和初始排序(使用 CSS 格式)。

唯一的麻烦是它处理空的 ells 并希望我们使用 Mottie fork 。也能正常工作，但是我发现没有任何东西可以让我的图像再次工作。

我的 CSS 部分是:

 /* tables sorting
----------------------------------------------------------*/
table.tablesorter {
    margin:10px 0pt 5px;
    font-size: 1.0EM;
    width: 100%;
    border: 1px solid #FFF;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
    font-size:1.0EM;
    padding: 4px;
}
table.tablesorter thead tr .header {
    background-image: url(/Images/bg.gif);
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}
table.tablesorter tbody td {
    color: #3D3D3D;
    padding: 4px;
    vertical-align: top;
}
table.tablesorter tbody tr.odd td {
    background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
    background-image: url(/Images/asc.gif);
}
table.tablesorter thead tr .headerSortDown {
    background-image: url(/Images/desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
    background-color: #8dbdd8;
}

在我的页面中，我目前有(我已恢复到原始表格排序器，但您可以看到除了允许空单元格的更改之外，没有任何超出正常情况的内容)

        $(document).ready(function () {
        $("#raceresults").tablesorter({
            sortList: [
                    [0, 0]
                ],
            // pass the headers argument 
            headers: {
                // assign the secound column 
                1: {sorter: false},
                2: {sorter: false},
                3: {sorter: false},
                7: {sorter: false},
                8: {sorter: false},
                9: {sorter: false}
            },
            textExtraction: function (node) {
                if (node.innerHTML.length == 0) {
                    return "999999999";  // or some suitably large number!
                }
                else {
                    return node.innerHTML;
                }
            },

        });
    });

然后我的 HTML 有:

<table id="raceresults" class="tablesorter">
@if (raceresults.Any())
{
    <thead>
        <tr style="background-color:lightgray">
            <th>Place</th>
            <th>ID</th>
            <th>Name</th>
            <th nowrap>Finish Time</th>
            <th>Handicap    </th>
            <th nowrap>Corrected Time   </th>
            <th>Avg Speed   </th>
            <th>Points</th>
            <th nowrap>Time Diff</th>
            <th nowrap>Cumm Diff</th>
        </tr>
    </thead>
    <tbody>

......

知道为什么图像不会显示吗？升级JS文件的时候CSS需要改吗？正如我所说，就使用 emptyto 底部而言，一切正常。

干杯

克雷格

Answer 1

我想我从来没有见过 v1.0.3...

无论如何，如果您从原始的 tablesorter 升级到我的 fork，则需要包含主题 css 文件，或者至少遵循模板，因为某些 css 类已更改。

进行更改的原因是为了避免混淆。原始表排序器具有相反的升序和降序排序图标(请参阅 this SO question )。更令人困惑的是，类名被标记为“headerSortUp”和“headerSortDown”。因此，为了避免这种情况，我将这些类重命名为“tablesorter-headerAsc”和“tablesorter-headerDesc”

所以，如果你想使用提供的CSS:

table.tablesorter thead tr .header {
    background-image: url(/Images/bg.gif);
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}

/* ... */

table.tablesorter thead tr .headerSortUp {
    background-image: url(/Images/asc.gif);
}
table.tablesorter thead tr .headerSortDown {
    background-image: url(/Images/desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
    background-color: #8dbdd8;
}

您需要更改一些默认设置( cssHeader 、 cssAsc 和 cssDesc ):

$(function () {
    $('table').tablesorter({
        cssAsc    : 'headerSortUp',
        cssDesc   : 'headerSortDown',
        cssHeader : 'header',
    });
});

实际上，这些选项只会向标题添加额外的类名称，因此在升序列上进行上述设置后，该单元格的类名称将如下所示:

<th class="tablesorter-header header tablesorter-headerAsc headerSortUp">...</th>