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> 

注册小部件
通过设置widgetswidgetOptions的值来注册小部件和设置对应小部件的选项。
例如以下代码,注册了两个小部件columnsstickyHeaderswidgetOptions中都为默认值,可以省略。
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

附:

标签: JavaScript, Html5