TableSorter 基于 jQuery 表格分页排序插件

发布于 2018-04-10 21:52:34 字数 10753 浏览 2317 评论 0

在行业系统的开发中,数据的排序是免不了的,在 C/S 开发中,数据的排序比较简单,而在 B/S 的开发中,通常排序是靠与服务端交互来完成,每一次排序都需要提起一次数据。这样很麻烦,而且对数据库的压力也很大。

TableSorter 基于 jQuery 表格分页排序插件

现在我们使用 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 有许多选项,你可以通过在初始化时达到不同的效果:

 

PropertyTypeDefaultDescriptionLink
sortListArraynullAn 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]]
sortMultiSortKeyStringshiftKeyThe 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
textExtractionString Or FunctionsimpleDefines 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.

headersObjectnullAn 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} }
sortForceArraynullUse 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.
widthFixedBooleanfalseIndicates if tablesorter should apply fixed widths to the table columns. This is useful for the Pager companion. Requires the jQuery dimension plugin to work.
cancelSelectionBooleantrueIndicates if tablesorter should disable selection of text in the table header (TH). Makes header behave more like a button.
cssHeaderString"header"The CSS style used to style the header in its unsorted state. Example from the blue skin:

th.header { 
    background-imageurl(../img/small.gif); 
    cursorpointer; 
    font-weightbold; 
    background-repeatno-repeat; 
    background-positioncenter left; 
    padding-left20px; 
    border-right1px solid #dad9c7; 
    margin-left: -1px; 
}
cssAscString"headerSortUp"The CSS style used to style the header when sorting ascending. Example from the blue skin:

th.headerSortUp { 
    background-imageurl(../img/small_asc.gif); 
    background-color#3399FF; 
}
cssDescString"headerSortDown"The CSS style used to style the header when sorting descending. Example from the blue skin:

th.headerSortDown { 
    background-imageurl(../img/small_desc.gif); 
    background-color#3399FF; 
}
debugBooleanfalseBoolean 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:

Optional/Add-Ons:

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)

官方网址:http://tablesorter.com/docs/

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84960 人气
更多

推荐作者

沧笙踏歌

文章 0 评论 0

山田美奈子

文章 0 评论 0

佚名

文章 0 评论 0

岁月无声

文章 0 评论 0

暗藏城府

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文