• 发表于：
  • 更新于：
  • 分类： 有点技术

Tablesorter是一个JQuery插件，功能是对标准的table进行排序，很简单，只要一句JS代码就能实现点击表头排序的功能，但也很强大，通过设置也能实现表头锁定，Ajax加载数据，分页，主题，复杂表头，表格嵌套等等功能，官方的API头都可以给你看大?。

简单开始

引用JS文件

<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jquery.tablesorter.js"></script>

构造标准的表格

<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>jsmith@gmail.com</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>fbach@yahoo.com</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>jdoe@hotmail.com</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>tconway@earthlink.net</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table>

对表格应用Tablesorter

$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
);

到此你的表格就已经被赋予了排序功能，排序点击表头即可~
tablesorter.jpg

没看错，默认的表格就是这么丑，不过Tablesorter支持主题，往下看
引用主题css文件

<link rel="stylesheet" href="theme.dropbox.css">

注册主题

$("#myTable").tablesorter({
    theme:"dropbox"
});

tablesorter1.jpg

瞬间回到现代，这是个dropbox风格主题。

排序功能

设置默认排序列
通过sortList来设置默认排序列，例如[[0,1]]表示第一列降序，0为列的索引，1表示降序。

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

tablesorter2.jpg

设置多列排序
例如[[3,1],[0,1]]表示首先第四列降序排，然后第一列降序排。

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

tablesorter3.jpg

禁用排序

$("#myTable").tablesorter({
    theme:"dropbox",
    sortList: [[3,1],[0,1]],
    headers:{
        1:{sorter:false},
        2:{sorter:false}
        }
});

这里禁用了第二列和第三列，此时点击表头不会排序。还有另一种方法，通过设置th的class禁用排序，class="sorter-false"。
自定义排序
这里我们想让Email列按照邮箱的域名来排序，首先需要定义一个解析器，解析器的作用就是获取单元格原始值，处理后返回Email的域名。
id为解析器唯一标识，注意不要和Tablesorter默认已有的解析器id重复(no-parser,text,digit,currency,url,isoDate,percent,image,usLongDate,shortDate,time,metadata)。
format用来处理单元格的内容，s为当前单元格的值，还有很多自动传入的参数这里占时用不到。
type指定format返回的值按照什么类型来排序,有数字numeric和文字text两种。

$.tablesorter.addParser({ 
    id: "email", 
    is: function(s, table, cell, $cell) {return false;}, 
    format: function(s, table, cell, cellIndex) { 
        let domain = s.split("@")[1];
        return domain;
    }, 
    type: 'text' 
});

定义好解析器后通过id调用:

$("#myTable").tablesorter({
    theme:"dropbox",
    sortList: [[3,1],[0,1]],
    headers:{
        1:{sorter:false},
        2:{sorter:"email"}
        }
});

Widgets 功能

Tablesorter可通过添加小部件的形式增加更多的功能，内置的小部件都在jquery.tablesorter.widgets.min.js这个文件里
引用小部件的JS文件

<script type="text/javascript" src="jquery.tablesorter.widgets.min.js"></script>

注册小部件
通过设置widgets和widgetOptions的值来注册小部件和设置对应小部件的选项。
例如以下代码，注册了两个小部件columns和stickyHeaders。widgetOptions中都为默认值，可以省略。
columns的功能是对指定了排序规则的列的每一个单元格自动添加一个class。从sortList的值可以看出已为第四列和第一列指定了排序规则，所以第四列所有的<td>的class就会多一个primary值，第一列所有的<td>的class会多一个secondary值。
stickyHeaders的功能是锁定表头，效果和Excel里的一样。

$("#myTable").tablesorter({
    theme:"dropbox",
    sortList: [[3,1],[0,1]],
    headers:{
        1:{sorter:false},
        2:{sorter:"email"}
    },
    widgets: ["columns","stickyHeaders"],
    widgetOptions : {
      columns: [ "primary", "secondary", "tertiary" ],
      stickyHeaders: ""
    }
});

tablesorter4.jpg

分页功能

引用CSS和JS文件

<link rel="stylesheet" href="jquery.tablesorter.pager.min.css">
<script type="text/javascript" src="jquery.tablesorter.pager.min.js"></script>

构造分页栏表单结构

<div id="pager" class="pager">
  <form>
    <img src="first.png" class="first"/>
    <img src="prev.png" class="prev"/>
    <!-- the "pagedisplay" can be any element, including an input -->
    <span class="pagedisplay" data-pager-output-filtered="{startRow:input} &ndash; {endRow} / {filteredRows} of {totalRows} total rows"></span>
    <img src="next.png" class="next"/>
    <img src="last.png" class="last"/>
    <select class="pagesize">
      <option value="10">10</option>
      <option value="all">All Rows</option>
    </select>
  </form>
</div>

注册分页插件
分页插件的设置项有很多，这里以最简单的为例，只需要通过container设置分页表单即可。

$("#myTable").tablesorterPager({
    container: $(".pager")
});

tablesorter5.jpg

附：

标签：,