7个最佳表格排序器JavaScript和jQuery插件

本文概述

• 7. Watable
• 6. jQuery Table Sort
• 5. Bootstrap Table
• 4. Stupid Table
• 3. Tablesort
• 2. Sortable
• 1. jQuery Table Sorter
• DataTables

如今, 许多人更喜欢通过简单地单击标题来对表进行排序, 而不希望重新加载页面。信不信由你, 有时刷新页面可能会很痛苦(根据你网站的设计和重量或用户的互联网连接速度), 因此, 如果你能够在文档中包含JavaScript, 则可能需要允许用户在视图中执行此操作而无需服务器逻辑。

像往常一样, 开源解决方案是理想的选择, 因为它可以处理在对任何类型的表进行排序时可能出现的多个问题。这将大大增加此功能的开发时间, 并保证订单能够按预期工作。我们为你收集了5种可以在自己的表上实现的最佳开源解决方案, 我们希望你喜欢它们！

7. Watable

Github

Watable是瑞士军队jQuery表格插件, 可让你轻松, 闪电般地过滤, 格式化, 分页和排序数据。 IE支持？是的, IE9 +。但是, 如果你删除底部的最后一个observe-js polyfill, 则IE7 / IE8可以工作。

6. jQuery Table Sort

Github

jQuery Table Sort是一个用于可排序表的小巧而简单的jQuery插件。要使其工作, 你只需要在页面上添加jQuery和tablesort插件即可：

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.tablesort.js"></script>

并使用方法将其初始化：

$('table').tablesort();

初始化之后, 你只需单击表头即可对表进行排序。

5. Bootstrap Table

Github

具有单选, 复选框, 排序, 分页和其他附加功能的扩展Bootstrap表。 Bootstrap表旨在减少开发时间, 并且不需要开发人员的特定知识。它既轻巧又功能丰富。该插件的大多数已知功能是：

• 为Bootstrap 3创建(支持Bootstrap 2)
• 响应式网页设计
• 具有固定标题的可滚动表
• 完全可配置
• 通过数据属性
• 显示/隐藏列
• 显示/隐藏标题
• 使用AJAX获取JSON格式的数据
• 单击即可进行简单的列排序
• 格式栏
• 单行或多行选择
• 强大的分页
• 卡视图
• 本土化
• 扩展名

4. Stupid Table

Github

Stupid Table是一个愚蠢的简单, 荒谬的轻量级jQuery表插件, 它允许你按列和不同类型进行排序。大多数表排序插件都试图说明无限数量的数据类型及其无限的呈现方式。这将导致代码库非常膨胀, 而项目中只使用了很少一部分代码。该插件通过让你定义自己的表列排序方式来避免该问题。该插件在内部识别” int”, ” string”, ” string-ins”(不区分大小写)和” float”, 因此简单的数据表对你而言几乎不需要花费任何精力。

3. Tablesort

Github

Tablesort是一个小型且简单的排序组件, 用于以JavaScript编写的表。你只需要添加源脚本并使用需要你要排序的表的DOM元素的构造函数即可：

<script src='tablesort.min.js'></script>

<!-- Include sort types you need -->
<script src='tablesort.number.js'></script>
<script src='tablesort.date.js'></script>

<script>
  new Tablesort(document.getElementById('table-id'));
</script>

当添加新数据时, Tablesort支持排序。只需调用refresh方法。

2. Sortable

Github

Sortable是一个开放源代码的JavaScript和CSS库, 它向表添加了排序功能。它提供：

• 嵌入式脚本和样式
• 6个精美的CSS主题
• 很小的占用空间(<2kb min + gzip), 没有依赖性
• 在移动设备上看起来和表现都很好

它可以在以下浏览器中使用：

• IE8 +
• Firefox 4+
• 当前的WebKit(Chrome, Safari)
• 歌剧

使用此插件所需要做的就是包括样式和源脚本：

<link rel="stylesheet" href="sortable-theme-dark.css" />
<script src="sortable.min.js"></script>

将sortable属性添加到表和一些类中：

<table class="sortable-theme-dark" data-sortable>
    <!-- ... -->
</table>

现在, 你应该可以轻松对表进行排序, 而无需重新加载页面。

1. jQuery Table Sorter

Github

jQuery Table Sorter是一个jQuery插件, 可以将带有THEAD和TBODY标签的任何标准HTML表转换为可排序的表, 而无需刷新页面。 Tablesorter可以成功解析和排序许多类型的数据, 包括单元格中的链接数据。它具有许多有用的功能, 包括：

• 多列排序
• 多体分类-请参阅下面的选项表
• 用于对文本, URI, 整数, 货币, 浮点数, IP地址, 日期(ISO, 长短格式), 时间进行排序的解析器。轻松添加自己的
• 支持辅助的”隐藏”排序(例如, 按其他条件排序时保持字母排序)
• 通过小部件系统进行扩展
• 跨浏览器：IE 6.0 +, FF 2 +, Safari 2.0 +, Opera 9.0+
• 适用于jQuery 1.2.6+(某些小部件需要jQuery 1.4.1+)。
• 适用于jQuery 1.9+(已删除$ .browser.msie；原始版本中需要)。
• 代码小

你可以通过按住Shift键并单击第二, 第三甚至第四列标题来同时对多列进行排序。

DataTables

DataTables是jQuery Javascript库的插件。它是一种高度灵活的工具, 基于渐进增强的基础, 并将向任何HTML表添加高级交互控件。该插件最著名的功能是：

• 分页, 即时搜索和多列排序
• 支持几乎所有数据源：
  • DOM, Javascript, Ajax和服务器端处理
• 易于主题化：DataTables, jQuery UI, Bootstrap, Foundation
• 各种各样的扩展公司。编辑器, 按钮, FixedColumns等
• 丰富的选项和美观, 富有表现力的API
• 完全国际化
• 专业品质：拥有2900多个单元测试套件的支持
• 免费的开源软件(MIT许可证)！提供商业支持。

Bootgrid

Github

jQuery Bootgrid是一个功能强大的表扩展程序。它将在你的表中添加一些不错且有用的功能, 如下所示。在此处查看演示, 并获得第一手印象。你需要快速启动的所有内容是：

1. 在你的HTML代码中包括jQuery, jQuery Bootgrid和Bootstrap库。
2. 通过添加data-column-id属性定义表布局和数据列。
3. 指定用于填充数据表的数据URL, 并通过数据API直接在表上将ajax选项设置为true。

如果你知道另一个很棒的开源插件可以使用jQuery或VanillaJS对表格进行动态排序, 请在注释框中与社区共享。