HTML5表格的表头排序,实现固定表头和可排序的jQuery表格插件

StickySort是一款非常实用的实现固定表头和可排序的jQuery表格插件。该表格可以非常容易的实现表格表头固定显示的效果。并且它可以对每一个表格列进行排序显示，非常的实用。

使用方法

该表格插件依赖于jQuery1.x+，jquery.ba-throttle-debounce.min.js为可选依赖文件，用于提高性能，以及jquery.stickysort.js和stickysort.css文件。

HTML结构

要使用该表格必须遵循下面的HTML结构，你的表格中应该包含下面的元素：

一个元素，它里面包含一个唯一的元素，元素中包含唯一的元素。

元素中使用一个或多个元素来包含元素。

一个最简单的表格结构应该像下面的样子：

如果你需要制作表格列固定效果，你需要将所有的

元素的第一个单元格使用一个元素来制作。

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该表格插件。

$(function () {

$('#content table').stickySort();

});

配置参数

下面是该表格插件的一些可用配置参数。

参数

类型

默认值

描述

threshold

Object

存储相关的对象来计算表头在距离表格结束多远时停止固定效果

threshold.rows

Numeric

3

从表格底部往上数的行数，滚动到这行时固定表头消失

threshold.viewport

Numeric

0.25

当前窗口高度的百分比，滚动到该处时固定表头消失

threshold.px

Numeric

false

高度的像素值，滚动到该处时固定表头消失

threshold.allowanceEval

String

min

如果上面的三个参数都设置了，插件如何进行选择

sortable

Boolean

false

指定表格是否可以进行排序

scrollThrottle

Numeric

15

通过JavaScript事件来限制滚动速度

resizeDebounce

Numeric

250

通过JavaScript调节window的resize事件

默认的选项如下：

{

threshold: {

rows: 3,

viewport: 0.25,

px: false,

allowanceEval: 'min'

},

sortable: false,

scrollThrottle: 15,

resizeDebounce: 250

}

排序

该表格插件的排序不是依赖于javascript的.sort()事件，插件对排序算法进行了优化。

调用表格排序

表格排序默认是不可用的。可以使用下面的方法来使表格排序可用：

$('table').stickySort({ sortable: true });

如果你只想对某个表格进行排序，插件只会对带有sortable class或HTML5 data属性data-sortable的表格进行排序。

表格排序状态

插件中有三种表格排序状态，可以通过点击来循环这些状态。

1、默认状态：所有行不排序。

2、升序排列：所有的表格行按升序排列。

3、降序排列：所有的表格行按降序排列。