This article illustrates how jquery implements table-local sorting. Share to everyone for your reference. The implementation methods are as follows:
Copy Code code as follows:
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head runat= "Server" >
<title>jquery Table Sort </title>
<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>
<script type= "Text/javascript" language= "JavaScript" src= "Js/jquery1.3.2.js" ></script>
<script type= "Text/javascript" language= "JavaScript" >
$ (function () {
JQuery.fn.alternateRowColors = function () {//form of plug-in
$ (' tbody tr:odd ', this). Removeclass (' even '). addclass (' odd '); Alternating color to odd rows
$ (' tbody Tr:even ', this). Removeclass (' odd '). addclass (' even '); Color-even rows of interlacing
return this;
};
$ (' table.mytable '). each (function () {
var $table = $ (this); To store a table as a jquery object
$table. Alternaterowcolors ($table); In the sort of a lapse in line discoloration
$ (' th ', $table). Each (function (column) {
var Findsortkey;
if ($ (this). is ('. Sort-alpha ')) {//alphabetical
Findsortkey = function ($cell) {
Return $cell. Find (' Sort-key '). Text (). toUpperCase () + ' + $cell. Text (). toUpperCase ();
};
else if ($ (this). is ('. Sort-numeric ')) {//sorted by number
Findsortkey = function ($cell) {
var key = parsefloat ($cell. Text (). replace (/^[^\d.] */, ''));
return isNaN (key)? 0:key;
};
else if ($ (this). is ('. Sort-date ')) {//sorted by date
Findsortkey = function ($cell) {
Return Date.parse (' 1 ' + $cell. Text ());
};
}
if (Findsortkey) {
$ (this). addclass (' clickable '). Hover (The function () {$ (this). addclass (' hover ');}, function () {$ (this). Removeclass (' Hover '); ). Click (function () {
Reverse Sort State Declaration
var newdirection = 1;
if ($ (this). is ('. Sorted-asc ')) {
Newdirection =-1;
}
var rows = $table. Find (' tbody>tr '). get (); Convert data rows to arrays
$.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) + ');
Implementing Reverse sorting
if (newdirection = = 1) {
$sortHead. addclass (' Sorted-asc ');
} else {
$sortHead. addclass (' Sorted-desc ');
}
Calling functions that interlace colors
$table. Alternaterowcolors ($table);
Removes the style of a sorted column and adds a style to the current column
$table. Find (' TD '). Removeclass (' sorted '). Filter (': Nth-child (' + (column + 1) + ') '). addclass (' sorted ');
$table. Trigger (' repaginate ');
});
}
});
});
});
Paging
$ (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>
</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" >
The 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>
Tmith
</td>
<td>
Erthn
</td>
<td>
Eth@gmail.com
</td>
<td>
$34.00
</td>
<td>
14 2009
</td>
<td>
Ftp://www.baidu.com
</td>
</tr>
<tr>
<td>
Ttmith
</td>
<td>
Bjohn
</td>
<td>
Jsmith@gmail.com
</td>
<td>
$50.00
</td>
<td>
Mar 2009
</td>
<td>
Ftp://www.baidu.com
</td>
</tr>
<tr>
<td>
Csmith
</td>
<td>
John
</td>
<td>
DDDD@gmail.com
</td>
<td>
$50.00
</td>
<td>
Mar 2009
</td>
<td>
Http://www.jb51.net
</td>
</tr>
<tr>
<td>
Smith
</td>
<td>
John
</td>
<td>
Sdsf@gmail.com
</td>
<td>
$50.00
</td>
<td>
F32 2009
</td>
<td>
Ffttp://www.jb51.net
</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
I hope this article will help you with your jquery programming.