The form is very familiar to everyone, today's CSS also makes the layout of the table more and more glorious people. But, in any case, can not conceal the rigid under the packaging.
So how to make those rigid data more readable, usability, can let us that data is "move"?
Here we use Jquery+ajax to inject some energy into the table. The main implementation of the goal is: the table column headings into a button, click on different column headings, and then the corresponding columns to sort the data. For example, the Student Information table, I click on the "Birthday" column, this table will be sorted by the birthday of the results present in front of us. Using AJAX to call this page also avoids the pain of refreshing the page.
Below I give the most basic JSP page
Detailed code is as follows
Copy Code code as follows:
<%@ page language= "java" import= "java.util.*" pageencoding= "Iso-8859-1"%>
<%
String path = Request.getcontextpath ();
String basepath = request.getscheme () + "://" +request.getservername () + ":" +request.getserverport () +path+ "/";
%>
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<base href= "<%=basePath%>" >
<title>my JSP ' sorttable.jsp ' starting page</title>
<meta http-equiv= "Pragma" content= "No-cache" >
<meta http-equiv= "Cache-control" content= "No-cache" >
<meta http-equiv= "Expires" content= "0" >
<meta http-equiv= "keywords" content= "keyword1,keyword2,keyword3" >
<meta http-equiv= "description" content= "This are my page" >
<!--
<link rel= "stylesheet" type= "Text/css" href= "Styles.css" >
-->
<script type= "Text/javascript" src= "Js/jquery-1.4.4.js" ></script>
<body>
<table class = "sorttable" style= "background-color:gray;color:white;" >
<thead>
<tr >
<th></th>
<th class= "Sort-alpha" >Title</th>
<th>Author</th>
<th>PublishDate</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>/images/javascript.jpg" width= "" height= "" "alt=" JavaScript "/></td >
<td>JavaScript</td>
<td> Douglas Crockford </td>
<td> May 2008</td>
<td>$31.02</td>
</tr>
<tr>
<td>/images/ajax.jpg" width= "height=" "alt=" Ajax and php:building Responsive Web Applications "/></td>
<td>ajax and php:building Responsive Web applications</td>
<td>cristian Darie,mihak bucica</td>
<td> Mar 2006</td>
<td>$31.02</td>
</tr>
<tr>
<td>/images/learning.jpg width=" height= "alt=" Learning Mambo "/></td" >
<td>learning mambo</td>
<td>douglas paterson</td>
<td> Mar 2006</td>
<td>$31.02</td>
</tr>
<tr>
<td>/images/think.jpg" width= "" height= "" alt= "Thinking in Java"/></td >
<td>thinking in Java</td>
<td>bruce Eckel </td>
<td> Feb 2006</td>
<td>$33.02</td>
</tr>
<tr>
<td>/images/jquery.jpg" width= "height=" "alt=" JQuery in Action, Second Edition "/></td>
<td>jquery in Action, Second edition</td>
<td>bear Bibeault/yehuda Katz
</td>
<td> APR 2010</td>
<td>$35.02</td>
</tr>
</tbody>
</table>
</body>
Step one: Add a odd-even row alternate background to a table
Copy Code code as follows:
<style type= "Text/css" >
. even{
Background-color: #E8A824;
}
. odd{
Background-color: #74411B;
}
</style>
Step two: Sort by alphabetical
Implementing a table-based title column for sorting
<thclass= "Sort-alpha" >Title</th>
Defines a Sort-alpha class for title
Copy Code code as follows:
<script type= "Text/javascript" language= "JavaScript" >
$ (document). Ready (function () {
var alternaterowcolors = function ($table) {
$ (' tbody tr:odd ', $table). Removeclass (' even '). addclass (' odd ');
$ (' tbody tr:even ', $table). Removeclass (' odd '). addclass (' even ')
};
$ (' table.sorttable '). each (function () {
var $table =$ (this);
Alternaterowcolors ($table);
$ (' th ', $table). Each (function (column) {
var $header = $ (this);
if ($header. is ('. Sort-alpha ')) {
$header. addclass (' clickable '). Hover (function () {
$header. addclass (' hover ');
},function () {
$header. Removeclass (' hover ');
). Click (function () {
var rows = $table. Find (' tbody>tr '). get ();
Rows.sort (function (a,b) {
var Keya =$ (a). Children (' TD '). EQ (column). Text (). toUpperCase ();
var keyb =$ (b). Children (' TD '). EQ (column). Text (). toUpperCase ();
if (keya<keyb) return-1;
if (keya>keyb) return 1;
return 0;
});
$.each (Rows,function (index,row) {
$table. Children (' tbody '). append (row);
});
Alternaterowcolors ($table);
});
}
});
});
});
</script>
At last
When you click Title
Final effect:
Other types of sorting are as follows:
