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

当前位置:主页 > jQuery库 > 表格 > 实现固定表头和可排序的jQuery表格插件
实现固定表头和可排序的jQuery表格插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:08-03
    阅读:
简要教程

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

使用方法

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

<link type="text/css" href="css/stickysort.css" media="all" rel="stylesheet" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.ba-throttle-debounce.min.js"></script>
<script src="js/jquery.stickysort.js"></script>                
              
HTML结构

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

  • 一个<thead>元素,它里面包含一个唯一的<tr>元素,<tr>元素中包含唯一的<th>元素。
  • <tbody>元素中使用一个或多个<tr>元素来包含<td>元素。

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

<table>
    <thead>
        <tr>
            <th></th>
            <!-- add more <th> as of when needed -->
        </tr>
    </thead>
    <tfoot><!-- tfoot will be hidden -->
        <tr>
            <th></th>
            <!-- add more <th> as of when needed -->
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td></td>
            <!-- add more <td> as of when needed -->
        </tr>
        <!-- add more rows as of when needed -->
    </tbody>
</table>                
              

如果你需要制作表格列固定效果,你需要将所有的<tr>元素的第一个单元格使用一个<th>元素来制作。

<table>
    <thead>
        <tr>
            <th></th>
            <!-- add more <th> as of when needed -->
        </tr>
    </thead>
    <tfoot><!-- --></tfoot>
    <tbody>
        <tr>
            <th></th><!-- first cell must ne <th> -->
            <td></td><!-- other cells are <td> -->
            <!-- add more <td> as of when needed -->
        </tr>
        <!-- add more rows as of when needed -->
    </tbody>
</table>                
              
初始化插件

在页面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、降序排列:所有的表格行按降序排列。