jQuery & Table 解析

jQuery && Table

    这中示例网上是很多的，这个示例是书上的例子，觉得有点价值，就保存到我的博客里了。希望和大家一起学习，共同完善这个示例，做成一个jQuery插件，可以满足我们通常对表格的需求。先看看这个效果：

    我将源码贴在这里,代码有注释，并且会持续更新，若有疑问也可以留言或直接Email我。

Head

<% @ Page Language = " C# " AutoEventWireup = " true " CodeBehind = " jQuery.aspx.cs " Inherits = " Web.jQuery " %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > jQuery Table </ title >

 

CSS

<style type="text/css">
thead
{
background-color : Blue ;
color : White ;
}
tr.odd
{
background-color : #ddd ;
}
tr.even
{
background-color : #eee ;
}
.clickable
{
text-decoration : underline ;
}
.hover
{
background-color : #5dd354 ;
}
.sorted
{
background-color : #ded070 ;
}
.page-number
{
color : Black ;
margin : 2px 10px ;
padding : 2px 5px ;
}
.active
{
border : solid 1px red ;
background-color : #76a7d2 ;
}
.pager
{
margin-bottom : 10px ;
margin-left : 20px ;
}
</style>

 

Scripts

< script type = " text/javascript " src = " scripts/jQuery/jquery-1.4.3.min.js " >< / script>
< script type = " text/javascript " >
$( function () {
jQuery.fn.alternateRowColors = function () { // 做成插件的形式
$( ' tbody tr:odd ' , this ).removeClass( ' even ' ).addClass( ' odd ' ); // 隔行变色 奇数行
$( ' tbody tr:even ' , this ).removeClass( ' odd ' ).addClass( ' even ' ); // 隔行变色 偶数行
return this ;
};

$( ' table.myTable ' ).each( function () {
var $table = $( this ); // 将table存储为一个jquery对象
$table.alternateRowColors($table); // 在排序时隔行变色

$( ' th ' , $table).each( function (column) {
var findSortKey;
if ($( this ).is( ' .sort-alpha ' )) { // 按字母排序
findSortKey = function ($cell) {
return $cell.find( ' sort-key ' ).text().toUpperCase() + '' + $cell.text().toUpperCase();
};
} else if ($( this ).is( ' .sort-numeric ' )) { // 按数字排序
findSortKey = function ($cell) {
var key = parseFloat($cell.text().replace( / ^[^\d.]* / , '' ));
return isNaN(key) ? 0 : key;
};
} else if ($( this ).is( ' .sort-date ' )) { // 按日期排序
findSortKey = function ($cell) {
return Date.parse( ' 1 ' + $cell.text());
};
}

if (findSortKey) {
$( this ).addClass( ' clickable ' ).hover( function () { $( this ).addClass( ' hover ' ); }, function () { $( this ).removeClass( ' hover ' ); }).click( function () {

// 反向排序状态声明
var newDirection = 1 ;
if ($( this ).is( ' .sorted-asc ' )) {
newDirection = - 1 ;
}

var rows = $table.find( ' tbody>tr ' ).get(); // 将数据行转换为数组
$.each(rows, function (index, row) {
row.sortKey = findSortKey($(row).children( ' td ' ).eq(column));
});
rows.sort( function (a, b) {
if (a.sortKey < b.sortKey) return - newDirection;
if (a.sortKey > b.sortKey) return newDirection;
return 0 ;
});
$.each(rows, function (index, row) {
$table.children( ' tbody ' ).append(row);
row.sortKey = null ;
});

$table.find( ' th ' ).removeClass( ' sorted-asc ' ).removeClass( ' sorted-desc ' );

var $sortHead = $table.find( ' th ' ).filter( ' :nth-child( ' + (column + 1 ) + ' ) ' );

// 实现反向排序
if (newDirection == 1 ) {
$sortHead.addClass( ' sorted-asc ' );
} else {
$sortHead.addClass( ' sorted-desc ' );
}

// 调用隔行变色的函数
$table.alternateRowColors($table);
// 移除已排序的列的样式,添加样式到当前列
$table.find( ' td ' ).removeClass( ' sorted ' ).filter( ' :nth-child( ' + (column + 1 ) + ' ) ' ).addClass( ' sorted ' );
$table.trigger( ' repaginate ' );
});
}
});
});
});
// 分页
$( function () {
$( ' table.paginated ' ).each( function () {
var currentPage = 0 ;
var numPerPage = 10 ;
var $table = $( this );
$table.bind( ' repaginate ' , function () {
$table.find( ' tbody tr ' ).hide().slice(currentPage * numPerPage, (currentPage + 1 ) * numPerPage).show();
});

var numRows = $table.find( ' tbody tr ' ).length;
var numPages = Math.ceil(numRows / numPerPage);

var $pager = $( ' <div class="pager"></div> ' );
for ( var page = 0 ; page < numPages; page ++ ) {
$( ' <span class="page-number"></span> ' ).text(page + 1 )
.bind( ' click ' , { newPage: page }, function (event) {
currentPage = event.data[ ' newPage ' ];
$table.trigger( ' repaginate ' );
$( this ).addClass( ' active ' ).siblings().removeClass( ' active ' );
}).appendTo($pager).addClass( ' clickable ' );
}
$pager.insertBefore($table);
$table.trigger( ' repaginate ' );
$pager.find( ' span.page-number:first ' ).addClass( ' active ' );
});
});
< / script>

 

Content

</ head >
< body >
< form id ="form1" runat ="server" >
< div >
< table class ="myTable paginated" >
< thead >
< tr >
< th class ="sort-alpha" >
Last Name
</ th >
< th class ="sort-alpha" >
First Name
</ th >
< th >
Email
</ th >
< th class ="sort-numeric" >
Due
</ th >
< th class ="sort-date" >
Date
</ 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 >
Mar 2009
</ td >
< td >
http://www.jsmith.com
</ td >
</ tr >
< tr >
< td >
Smith
</ td >
< td >
John
</ td >
< td >
jsmith@gmail.com
</ td >
< td >
$50.00
</ td >
< td >
Mar 2009
</ td >
< td >
http://www.jsmith.com
</ td >
</ tr >
< tr >
< td >
Smith
</ td >
< td >
John
</ td >
< td >
jsmith@gmail.com
</ td >
< td >
$50.00
</ td >
< td >
Mar 2009
</ td >
< td >
http://www.jsmith.com
</ td >
</ tr >
< tr >
< td >
Smith
</ td >
< td >
John
</ td >
< td >
jsmith@gmail.com
</ td >
< td >
$50.00
</ td >
< td >
Mar 2009
</ td >
< td >
http://www.jsmith.com
</ td >
</ tr >
< tr >
< td >
Smith
</ td >
< td >
John
</ td >
< td >
jsmith@gmail.com
</ td >
< td >
$50.00
</ td >
< td >
Mar 2009
</ td >
< td >
http://www.jsmith.com
</ td >
</ tr >
< tr >
< td >
Song
</ td >
< td >
Stone
</ td >
< td >
jsmith@gmail.com
</ td >
< td >
$50.00
</ td >
< td >
Mar 2009
</ td >
< td >
http://www.jsmith.com
</ td >
</ tr >
< tr >
< td >
Li
</ td >
< td >
Nate
</ td >
< td >
jsmith@gmail.com
</ td >
< td >
$50.00
</ td >
< td >
Mar 2009
</ td >
< td >
http://www.jsmith.com
</ td >
</ tr >
< tr >
< td >
Xu
</ td >
< td >
Susie
</ td >
< td >
jsmith@gmail.com
</ td >
< td >
$50.00
</ td >
< td >
Mar 2009
</ td >
< td >
http://www.jsmith.com
</ td >
</ tr >
< tr >
< td >
Bose
</ td >
< td >
Arijit
</ td >
< td >
jsmith@gmail.com
</ td >
< td >
$50.00
</ td >
< td >
Mar 2009
</ td >
< td >
http://www.jsmith.com
</ td >
</ tr >
< tr >
< td >
Shen
</ td >
< td >
Gary
</ td >
< td >
jsmith@gmail.com
</ td >
< td >
$50.00
</ td >
< td >
Mar 2009
</ td >
< td >
http://www.jsmith.com
</ td >
</ tr >
< tr >
< td >
Li
</ td >
< td >
Marry
</ td >
< td >
jsmith@gmail.com
</ td >
< td >
$50.00
</ td >
< td >
Mar 2009
</ td >
< td >
http://www.jsmith.com
</ td >
</ tr >
< tr >
< td >
Xiang
</ td >
< td >
Raymond
</ td >
< td >
jsmith@gmail.com
</ td >
< td >
$50.00
</ td >
< td >
Mar 2009
</ td >
< td >
http://www.jsmith.com
</ td >
</ tr >
< tr >
< td >
Wang
</ td >
< td >
Leona
</ td >
< td >
jsmith@gmail.com
</ td >
< td >
$50.00
</ td >
< td >
Mar 2009
</ td >
< td >
http://www.jsmith.com
</ td >
</ tr >
< tr >
< td >
Kummmer
</ td >
< td >
Sasi
</ td >
< td >
jsmith@gmail.com
</ td >
< td >
$50.00
</ td >
< td >
Mar 2009
</ td >
< td >
http://www.jsmith.com
</ td >
</ tr >
< tr >
< td >
Huang
</ td >
< td >
Dannier
</ td >
< td >
jsmith@gmail.com
</ td >
< td >
$50.00
</ td >
< td >
Mar 2009
</ td >
< td >
http://www.jsmith.com
</ td >
</ tr >
< tr >
< td >
Smith
</ td >
< td >
John
</ td >
< td >
jsmith@gmail.com
</ td >
< td >
$50.00
</ td >
< td >
Mar 2009
</ td >
< td >
http://www.jsmith.com
</ td >
</ tr >
< tr >
< td >
Smith
</ td >
< td >
John
</ td >
< td >
jsmith@gmail.com
</ td >
< td >
$50.00
</ td >
< td >
Mar 2009
</ td >
< td >
http://www.jsmith.com
</ td >
</ tr >

</ tbody >
</ table >
</ div >
</ form >
</ body >
</ html >

转载于:https://www.cnblogs.com/Dannier/articles/1926580.html