在前端开发中，表格是一个非常常见的组件，而表格排序是其必要的功能之一。这时候就可以使用 tablesort 这个 NPM 包来实现表格排序功能。
安装
首先，在项目目录下通过终端运行以下命令来安装 tablesort：
npm install tablesort --save
使用
引入
在需要使用的页面引入 tablesort：
<script src="node_modules/tablesort/dist/tablesort.min.js"></script>
HTML 结构
在 HTML 中，定义要排序的表格：
-- -------------------- ---- -------
------ -------------
-------
----
-----------
-----------
-----------
-----
--------
-------
----
-----------
-----------
-----------
-----
----
-----------
-----------
-----------
-----
----
-----------
-----------
-----------
-----
--------
--------初始化
在脚本中初始化 tablesort:
new Tablesort(document.getElementById('myTable'));这样，表格就可以进行排序了。
高级用法
tablesort 还有一些高级功能，比如可以对数字、日期等进行排序。下面是一个示例代码：
-- -------------------- ---- -------
------ -------------
-------
----
-----------
-----------
-----------
-------------
-----
--------
-------
----
-----------
--- -----------------------
-----------
--- ---------------------------------------
-----
----
-----------
--- -----------------------
-----------
--- ---------------------------------------
-----
----
-----------
--- -----------------------
-----------
--- ---------------------------------------
-----
--------
--------
--------
--- --------------------------------------------- -
-------- ----------- -- -
- - --------------
- - --------------
------ -------- -- -------- - - - - - - - -- - - - --
-
---
---------这段代码中，我们给每个需要进行数字或日期排序的单元格添加了 data-value 属性，并在初始化 tablesort 时传入了一个 compare 函数，用来比较日期。
总结
随着前端技术的不断发展，可以方便地使用许多优秀的开源工具库来完成开发任务。tablesort 就是一个非常实用的表格排序工具，灵活易用，可以大大提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35837