README

tableSorter

一个用于排序表格的小型 jQuery 插件

安装

此包适用于 node，也适用于 composer。

NPM

运行 $ npm install bitandblack-table-sorter 来安装 TableSorter。

Yarn

运行 $ yarn add bitandblack-table-sorter 来安装 TableSorter。

Composer

运行 $ composer require bitandblack/table-sorter 和 $ composer update 来安装 TableSorter。

如何使用

初始化

TableSorter 需要在 jQuery 的 ready 函数内部初始化

$(document)
    .ready(function() {
        $('#yourtable').tableSorter();
    })
;

HTML 表格

TableSorter 需要一个包含 thead 和 tbody 的经典表格

<table id="yourtable">
    <thead>
        <tr>
            <th>Row 1, Cell 1</th>
            <th>Row 2, Cell 1</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1, Cell 2</td>
            <td>Row 2, Cell 2</td>
        </tr>
        <tr>
            <td>Row 1, Cell 3</td>
            <td>Row 2, Cell 3</td>
        </tr>
    </tbody>
</table>

可选

排序值

如果您想以不同于表格行值的方式排序表格，只需将 data-sort-value 属性添加到您的表格单元格中即可。这些值可以动态更改，TableSorter 将从其自身中找到它们。

禁用列

您可以禁用列以进行排序。按照以下方式初始化 TableSorter

$(document)
    .ready(function() { 
        $('#yourtable')
            .tableSorter({
                headers: { 
                    0: { 
                        sorter: false 
                    }
                }
            })
        ;
    })
;

保持行在一起

如果您想无论排序选项如何都能将两行或多行保持在一起，只需添加两个属性：分别添加 data-sort-pair-id 和 data-sort-pair-master 以及 data-sort-pair-slave。然后它应该看起来像这样

<table id="yourtable">
    <thead>
        <tr>
            <th>row10</th>
            <th>row20</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>row11</td>
            <td>row21</td>
        </tr>
        <tr data-sort-pair-id="1" data-sort-pair-master>
            <td>row12</td>
            <td>row22</td>
        </tr>
        <tr data-sort-pair-id="1" data-sort-pair-slave>
            <td>row13</td>
            <td>row23</td>
        </tr>
        <tr>
            <td>row14</td>
            <td>row24</td>
        </tr>
    </tbody>
</table>

回调函数

这些提供了更多控制，您可以使用回调函数 onsortstart 和 onsortfinish。如果您将 callbackBehaviour 设置为 onsortstart 中的 break，则 TableSorter 将执行回调而不进行排序。这可能在您想加载一个全新的已排序表格或包含新数据的新表格时很有用。

帮助

请随时通过 tablesorter@bitandblack.com 联系我们。

bitandblack / table-sorter

维护者

详细信息