TableSorter 基于 jQuery 表格分页排序插件
在行业系统的开发中,数据的排序是免不了的,在 C/S 开发中,数据的排序比较简单,而在 B/S 的开发中,通常排序是靠与服务端交互来完成,每一次排序都需要提起一次数据。这样很麻烦,而且对数据库的压力也很大。
现在我们使用 jQuery 插件 TableSorter 来完成静态排序,大大减轻了数据库的压力。 TableSorter 是一个用来直接在浏览器上对表格数据进行排序的 jQuery 插件,无需再次刷新页面,支持多种单元格数据类型,例如数值、字符串、日期和自定义排序。
插件特点
主要的特点包括:
- 多列排序
- 支持文本、URL地址、数值、IP地址、日期类型,以及自定义类型排序
- 支持 TH 元素的 ROWSPAN 和 COLSPAN 属性
- 支持第二个隐藏域排序
- 可扩展外观
- 程序简小,打包后只有 7.4K
使用方法
首先引入 jQuery 和 TableSorter 插件文件
<script src="js/jquery.js"></script> <script src="js/tablesorter.js"></script>
编写一个简单的 Table 表格
<table id="sortTable"> <thead> <tr> <th>序号</th> <th>地址</th> <th>姓名</th> <th>年龄</th> <th>日期</th> </tr> </thead> <tr> <td width="53">1</td> <td width="181">山西省长治市</td> <td width="117">赵磊</td> <td width="117">24</td> <td width="120">2006.10.10</td> </tr> <tr> <td>2</td> <td>山西省太原市</td> <td>李清</td> <td>30</td> <td>2008.12.30</td> </tr> <tr> <td>3</td> <td>河南省郑州市</td> <td>常建坤</td> <td>51</td> <td>2002.08.30</td> </tr> <tr> <td>4</td> <td>山东省济南市</td> <td>张耀</td> <td>20</td> <td>2001.01.05</td> </tr> <tr> <td>5</td> <td>四川省成都市</td> <td>唐骏</td> <td>15</td> <td>2005.07.08</td> </tr> <tr> <td>6</td> <td>广东省广州市</td> <td>安意如 </td> <td>36</td> <td>2006.04.30</td> </tr> <tr> <td>7</td> <td>湖南省长沙市</td> <td>何马</td> <td>28</td> <td>2007.12.12</td> </tr> <tr> <td>8</td> <td>湖北省武汉市</td> <td>苏小白</td> <td>41</td> <td>2009.05.06</td> </tr> <tr> <td>9</td> <td>江苏省杭州市</td> <td>饶尚宽</td> <td>22</td> <td>2010.12.10</td> </tr> <tr> <td>10</td> <td>陕西省西安市</td> <td>石晓娜</td> <td>15</td> <td>2003.03.05</td> </tr> </table>
最后调用 tablesorter() 方法,需要注意的是,字段名称是需要用<thead><tr><th>来指明才可以完成排序。
$(function(){ $("#sortTable").tablesorter(); });
点击表格的标题,你将会看到你的表格可以排序了,在初始化插件的时候,我们还可以传递一些参数,来完成我们自定义的要求。
下面是的代码是定制第一列和第二列可以使用排序:
$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );
可选参数
TableSorter 有许多选项,你可以通过在初始化时达到不同的效果:
Property | Type | Default | Description | Link |
---|---|---|---|---|
sortList | Array | null | An array of instructions for per-column sorting and direction in the format: [[columnIndex, sortDirection], ... ] where columnIndex is a zero-based index for your columns left-to-right and sortDirection is 0 for Ascending and 1 for Descending. A valid argument that sorts ascending first by column 1 and then column 2 looks like: [[0,0],[1,0]] | |
sortMultiSortKey | String | shiftKey | The key used to select more than one column for multi-column sorting. Defaults to the shift key. Other options might be ctrlKey, altKey. Reference: http://developer.mozilla.org/en/docs/DOM:event#Properties | |
textExtraction | String Or Function | simple | Defines which method is used to extract data from a table cell for sorting. Built-in options include "simple" and "complex". Use complex if you have data marked up inside of a table cell like: <td><strong><em>123 Main Street</em></strong></td> . Complex can be slow in large tables so consider writing your own text extraction function "myTextExtraction" which you define like:var myTextExtraction = function(node) { // extract data from markup and return it return node.childNodes[0].childNodes[0].innerHTML; } $(document).ready(function() { $("#myTable").tableSorter( {textExtraction: myTextExtraction} ); } ); tablesorter will pass a jQuery object containing the contents of the current cell for you to parse and return. Thanks to Josh Nathanson for the examples. | |
headers | Object | null | An object of instructions for per-column controls in the format: headers: { 0: { option: setting }, ... } For example, to disable sorting on the first two columns of a table: headers: { 0: { sorter: false}, 1: {sorter: false} } | |
sortForce | Array | null | Use to add an additional forced sort that will be appended to the dynamic selections by the user. For example, can be used to sort people alphabetically after some other user-selected sort that results in rows with the same value like dates or money due. It can help prevent data from appearing as though it has a random secondary sort. | |
widthFixed | Boolean | false | Indicates if tablesorter should apply fixed widths to the table columns. This is useful for the Pager companion. Requires the jQuery dimension plugin to work. | |
cancelSelection | Boolean | true | Indicates if tablesorter should disable selection of text in the table header (TH). Makes header behave more like a button. | |
cssHeader | String | "header" | The CSS style used to style the header in its unsorted state. Example from the blue skin:th.header { background-image: url(../img/small.gif); cursor: pointer; font-weight: bold; background-repeat: no-repeat; background-position: center left; padding-left: 20px; border-right: 1px solid #dad9c7; margin-left: -1px; } | |
cssAsc | String | "headerSortUp" | The CSS style used to style the header when sorting ascending. Example from the blue skin:th.headerSortUp { background-image: url(../img/small_asc.gif); background-color: #3399FF; } | |
cssDesc | String | "headerSortDown" | The CSS style used to style the header when sorting descending. Example from the blue skin:th.headerSortDown { background-image: url(../img/small_desc.gif); background-color: #3399FF; } | |
debug | Boolean | false | Boolean flag indicating if tablesorter should display debuging information usefull for development. |
浏览器兼容
TableSorter 已在以下浏览器 JavaScript 测试成功启用:
- Firefox 2+
- Internet Explorer 6+
- Safari 2+
- Opera 9+
- Konqueror
下载插件
Full release - Plugin, Documentation, Add-ons, Themes jquery.tablesorter.zip
Pick n choose - Place at least the required files in a directory on your webserver that is accessible to a web browser. Record this location.
Required:
- jQuery (1.2.1 or higher)
Optional/Add-Ons:
- jQuery Metadata 2.1 (3,7kb Required for setting inline options)
- jquery.tablesorter.pager.js (3,6kb, tablesorter pagination plugin)
Themes:
- Green Skin - Images and CSS styles for green themed headers
- Blue Skin - Images and CSS styles for blue themed headers (as seen in the examples)
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论