排序顺序插件

最近，我收到一个开发人员提出的一个有趣的问题，他希望向其最终用户展示将多列排序应用于 DataTable 时所应用的排序顺序的直观表示。例如，如果你在排序中使用了两个列，那么了解 DataTables 用哪一列作主排序和次排序是很有用的。

DataTables 的默认样式确实包括对已排序列中的单元格进行阴影处理，但主次排序之间的差异是故意很细微的。为了让它更突出，我想出了在排序指示符旁边显示编号标签的主意。在下面的示例中，第一列和第二列分别用于主排序和次排序，你可以在每列顶部看到编号

姓名	职位	办公室	工资
Tiger Nixon	系统架构师	爱丁堡	$320,800
Garrett Winters	会计	东京	$170,750
Ashton Cox	初级技术作者	旧金山	$86,000
Cedric Kelly	高级 JavaScript 开发者	爱丁堡	$433,060
Airi Satou	会计	东京	$162,700
Brielle Williamson	集成专家	纽约	$372,000
Herrod Chandler	销售助理	旧金山	$137,500
Rhona Davidson	集成专家	东京	$327,900
Colleen Hurst	JavaScript 开发者	旧金山	$205,500
Sonya Frost	软件工程师	爱丁堡	$103,600
Jena Gaines	办公室经理	伦敦	$90,560
Quinn Flynn	支持负责人	爱丁堡	$342,000
Charde Marshall	区域总监	旧金山	$470,600
Haley Kennedy	高级营销设计师	伦敦	$313,500
Tatyana Fitzpatrick	区域总监	伦敦	$385,750
Michael Silva	营销设计师	伦敦	$198,500
Paul Byrd	首席财务官 (CFO)	纽约	$725,000
Gloria Little	系统管理员	纽约	$237,500
Bradley Greer	软件工程师	伦敦	$132,000
Dai Rios	人事负责人	爱丁堡	$217,500
Jenette Caldwell	开发负责人	纽约	$345,000
Yuri Berry	首席营销官 (CMO)	纽约	$675,000
Caesar Vance	售前支持	纽约	$106,450
Doris Wilder	销售助理	悉尼	$85,600
Angelica Ramos	首席执行官 (CEO)	伦敦	$1,200,000
Gavin Joyce	开发人员	爱丁堡	$92,575
Jennifer Chang	区域总监	新加坡	$357,650
Brenden Wagner	软件工程师	旧金山	$206,850
Fiona Green	首席运营官 (COO)	旧金山	$850,000
Shou Itou	区域营销	东京	$163,000
Michelle House	集成专家	悉尼	$95,400
Suki Burks	开发人员	伦敦	$114,500
Prescott Bartlett	技术作者	伦敦	$145,000
Gavin Cortez	团队负责人	旧金山	$235,500
Martena Mccray	售后支持	爱丁堡	$324,050
Unity Butler	营销设计师	旧金山	$85,675
Howard Hatfield	办公室经理	旧金山	$164,500
Hope Fuentes	秘书	旧金山	$109,850
Vivian Harrell	财务控制	旧金山	$452,500
Timothy Mooney	办公室经理	伦敦	$136,200
Jackson Bradshaw	董事	纽约	$645,750
Olivia Liang	支持工程师	新加坡	$234,500
Bruno Nash	软件工程师	伦敦	$163,500
Sakura Yamamoto	支持工程师	东京	$139,575
Thor Walton	开发人员	纽约	$98,540
Finn Camacho	支持工程师	旧金山	$87,500
Serge Baldwin	数据协调员	新加坡	$138,575
Zenaida Frank	软件工程师	纽约	$125,250
Zorita Serrano	软件工程师	旧金山	$115,000
Jennifer Acosta	初级 JavaScript 开发者	爱丁堡	$75,650
Cara Stevens	销售助理	纽约	$145,600
Hermione Butler	区域总监	伦敦	$356,250
Lael Greer	系统管理员	伦敦	$103,500
Jonas Alexander	开发人员	旧金山	$86,500
Shad Decker	区域总监	爱丁堡	$183,000
Michael Bruce	JavaScript 开发者	新加坡	$183,000
Donna Snider	客户支持	纽约	$112,000

在列标题上使用Shift 单击来触发表格中的多列排序，并注意指示符的更改。当排序仅应用于一列时，将不显示其他指示符。

用量

在详细说明如何创建此效果之前，让我们探讨如何使用 OrderNumber 插件。

初始化

此示例的初始化通过在 DataTables 配置中启用新的 orderNumbers 选项非常简单地完成

new DataTable('#myTable', {
    orderNumbers: true
});

就是这样！

可在 DataTables CDN 上获取要直接包含在页面上的发行文件

CSS

如果你正在使用 bundler，这个插件可在 npm 上作为 datatables.net-feature-ordernumbers 获得。要将其与 ES 模块一起使用，只需包含该程序包，它将自动注册为可用功能

import DataTable from 'datatables.net-dt';
import 'datatables.net-feature-ordernumbers';

new DataTable('#myTable', {
    orderNumbers: true
});

此 StackBlitz 示例演示了在 Typescript + Vite 构建环境中使用的新插件。

DataTables 插件 Git 仓库中提供了此插件的源代码，并已根据 MIT 许可证发布。

样式

序数的默认 CSS 非常粗体，并且为黑白，既有暗色模式的样式，也有亮色模式的样式。你可能非常希望修改样式以适应自己的配色方案。这可使用 CSS 变量在样式表中轻松地完成。

OrderNumbers 定义了用于自定义指示器颜色的四个变量

table {
    --dt-order-numbers-light-color: white;
    --dt-order-numbers-light-background: #555;
    --dt-order-numbers-dark-color: black;
    --dt-order-numbers-dark-background: #d3d3d3;
}

根据需要修改并包含在自己的 CSS 中。

创建插件

此插件主要由 draw 事件驱动 - 侦听主机 DataTable 上的该事件并在对其执行排序时将元素插入页眉单元格。我们可以使用 order() 获取当前顺序。因此，插件真正可以归结为

table.on('draw', function () {
    var order = table.order();

    if (order.length > 1) {
        for (var i = 0; i < order.length; i++) {
            var col = table.column(order[i][0]);
            var cell = col.header();

            if (! col.visible()) {
                continue;
            }

            $('<span>')
                .addClass('dt-order-number')
                .text(i + 1)
                .appendTo(cell);
        }
    }
});

此处我们遍历 order 给出的 2D 数组，并为每个条目获取相关列。第 9 行确认该列在显示数字前实际上是可见的，第 13-16 行创建一个简单的 span 并将其插入列的页眉单元格（由 column().header() 给出 - 第 7 行）。

除了创建新元素外，我们还需要删除它们。在每次绘制时，我们可以使用单行 jQuery 从页眉中选择旧元素 (table().header()) 并将其从文档中删除

$('span.dt-order-number', table.table().header()).remove();

唯一缺失的部分是侦听 DataTables 初始化，以便我们可以检查初始化选项，看看是否应该添加 draw 事件侦听器。我们使用 document 中的 init 侦听器执行此操作，因此我们知道任何 DataTable 何时初始化。接下来，检查初始化对象 (init()) 中是否存在 orderNumbers 或是否已默认启用 - 如果是这样，请添加侦听器

$(document).on('init.dt', function (e, settings) {
    var api = new DataTable.Api(settings);

    var enable = api.init().orderNumbers || DataTable.defaults.orderNumbers;

    if (enable) {
        orderNumbers(api);
    }
});

创建自己的插件

这是一个有趣的插件，希望能为尝试对 DataTables 进行自定义感兴趣的人提供一个有趣的起点。或许它会激发你想要看到的内容的想法。如果您这样做，请与我们联系并与社区分享！