使用用jQuery和QuickSearch、TableSorter插件来增强界面交互

核心提示： 你已经完成了所有的工作，来看看成果吧：Table Sorter接下来我们通过Table Sorter来添加排序的功能，使用用jQuery和QuickSearch、TableSorter插件来增强界面交互(3)，你可以通过以下代码对名为myTable的Table添加排序支持，但没有任何样式或

你已经完成了所有的工作，来看看成果吧：

Table Sorter

接下来我们通过Table Sorter来添加排序的功能。你可以通过以下代码对名为myTable的Table添加排序支持，但没有任何样式或者默认的排序，而是实现反转排序。

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

以下代码则给明为myTable的table添加了默认的排序：第一列和第三列。

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

你可以指定更多的参数来让tablesorter更符合你的期望。请参考http://tablesorter.com/docs/#Configuration来获取参数。

在本例子中，我们想指定Header的样式来指示排序的不同状态。首先我们定义几个样式来控制header：

th.header {
　　background-image: url(../img/bg.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;
}
　　
th.headerSortUp {
　　background-image: url(../img/asc.gif);
　　background-color: #3399FF;
}
　　
th.headerSortDown {
　　background-image: url(../img/desc.gif);
　　background-color: #3399FF;
}

注意：将Header类定义在headerSortUp和headerSortDown类之前，因为header是默认的TH的样式，在你点Header来排序后，TableSorter会将HeaderSortUp或headerSortDown类附加到Class属性里，这时，如果先定义了headerSortUp/headerSortDown,根据Css里应用规则，asc.gif和desc.gif不会被调入。

然后通过给blogList表格应用tablesorter方法就可以实现：

$("#blogList").tablesorter({ cssAsc: "headerSortUp", cssDesc: "headerSortDown", cssHeader: "header" });

看看处理结果吧：

jQuery还有很多插件：比如DatePicker，BlockUI等，组合起来可以做很多有意思的应用：）