Question

使用V 1.0.3创建一个有效的tablesorter实例，其中所有内容都只与所选列完美配合，显示自定义图像并在单个列上进行初始排序（使用CSS格式）。

唯一的麻烦在于它处理空的ells并且想要我们Mottie叉子。这个工作也可以，但是我找不到任何东西可以让我的图像再次运行。

我的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;
}

在我的页面中，我目前已经（我已经恢复原来的tableorter，但你可以看到除了正常情况之外没有任何东西，除了允许空单元格的变化）

        $(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类已经改变。

改变的原因是为了避免混淆。原始的tablesorter有升序和升序的图标。降序排序逆转（见this SO question）。令它更令人困惑的是，班级名称被标记为＆＃34; headerSortUp＆＃34;和＃34; headerSortDown＆＃34;。所以为了避免这种情况，我将类重命名为＆＃34; tablesorter-headerAsc＆＃34;和＆＃34; tablesorter-headerDesc＆＃34;

所以，如果你想使用提供的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＆amp; cssDesc）：

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

实际上，这些选项只会在标题中添加其他类名，因此对于具有升序排序的列的上述设置，该单元格的类名称将如下所示：

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

将tablesorter升级到Mottie fork

1 个答案: