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

发布于 2018-04-10 21:52:34 字数 10753 浏览 2059 评论 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">
    <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>
    <td>安意如 </td>

最后调用 tablesorter() 方法,需要注意的是,字段名称是需要用<thead><tr><th>来指明才可以完成排序。




$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );


TableSorter 有许多选项,你可以通过在初始化时达到不同的效果:


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.
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; 
        $("#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-positioncenter left; 
    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 { 
cssDescString"headerSortDown"The CSS style used to style the header when sorting descending. Example from the blue skin:

th.headerSortDown { 
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

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.




  • 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 技术交流群。



需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。





0 文章
0 评论
84935 人气



文章 0 评论 0


文章 0 评论 0


文章 0 评论 0


文章 0 评论 0


文章 0 评论 0

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