使用 jquery-sortElements 实现轻量级 Table 表格排序

白榆

发布时间：2026-10-14 | 3人浏览过

原创

面对项目中对表格排序的需求，选择合适的工具至关重要。相比于体积较大的DataTables或存在兼容问题的tablesawer，jquery-sortElements凭借仅3KB的体量和良好的兼容性成为轻量级方案的首选。本文将演示如何通过简单的几步配置，利用原生jQuery逻辑实现点击表头即排序的功能。

方案对比与选择

在前端开发中，实现Table排序有多种途径：

JQuery.tablesorter：大小约17KB，但需注意其在较旧浏览器（如IE10）下的潜在兼容性问题。
DataTables：功能极其强大，支持分页、搜索等高级功能，但体积较大（约75KB），对于只需要简单排序的场景略显沉重。
jquery-sortElements：核心优势在于小巧（约3KB）、代码简洁且在GitHub上拥有良好的社区支持，非常适合追求轻量的项目。

实施准备与操作步骤

第一步：引入必要的 JS 资源

首先确保环境中已加载 jQuery 库，随后加载 jquery.sortElements.js 插件文件。

代码如下:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.sortElements.js"></script>

第二步：编写排序逻辑脚本

在文档加载完成后，获取目标表格及需要排序的表头元素。通过遍历表头绑定点击事件，利用回调函数比较单元格文本内容，并切换正序/倒序状态。

代码如下:

$(document).ready(function(){
    var table = $('#mytable'); // 指定表格ID
    
    $('#sort_header').each(function(){
        var th = $(this),
            thIndex = th.index(),
            inverse = false;

        th.click(function(){
            table.find('td').filter(function(){
                return $(this).index() === thIndex;
            }).sortElements(function(a, b){
                // 比较两个单元格的文本内容
                return $.text([a]) > $.text([b]) ?
                    inverse ? -1 : 1
                    : inverse ? 1 : -1;
            }, function(){
                // 返回父节点以维持行结构
                return this.parentNode;
            });
            
            // 切换排序方向
            inverse = !inverse;
        });
    });
});

第三步：构建 HTML 表格结构

为触发上述逻辑，HTML中的表头（th）需设置可识别的ID或类名（如示例中的sort_header），以便JS定位。以下是一个标准的Table结构示例：

代码如下:

<table id="mytable">
    <tr>
        <th id="sort_header">Facility name</th>
        <th>Phone #</th>
        <th id="city_header">City</th>
        <th>Speciality</th>
    </tr>
    <tr>
        <td>CCC</td>
        <td>00001111</td>
        <td>Amsterdam</td>
        <td>GGG</td>
    </tr>
    
</table>

通过以上步骤，即可在不依赖重型框架的前提下，实现高效的表格列排序功能。

以上就是使用 jquery-sortElements 实现 Table 表格排序的详细内容，更多关于 JavaScript 表格处理技巧的资料请关注本站其它相关文章！