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、降序排列:所有的表格行按降序排列。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!