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

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

在行业系统的开发中，数据的排序是免不了的，在 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
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.