So how can we make those rigid data more readable and available, and make those data "dynamic?
Below we use jquery + ajax to inject some vigor into the table. The main purpose is to convert the column title of the table into buttons. Click different Column Titles to sort the data according to the corresponding columns. For example, in the student information table, I click the "Birthday" column, and this table will display the results in the order of birthdays. Calling this page using ajax also avoids the trouble of refreshing the page.
Below I will provide the most basic jsp page
The Code is as follows:Copy codeThe Code is 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">
<Html>
<Head>
<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 is my page">
<! --
<Link rel = "stylesheet" type = "text/css" href = "styles.css">
-->
<Script type = "text/javascript" src = "js/jquery-1.4.4.js"> </script>
</Head>
<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 = "40" height = "50" alt = "JavaScript"/> </td>
<Td> JavaScript </td>
<Td> Douglas Crockford </td>
<Td> May 1, 2008 </td>
<Td> $31.02 </td>
</Tr>
<Tr>
<Td> /images/Ajax.jpg" width = "40" height = "50" 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 = "40" height = "50" 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 = "40" height = "50" alt = "Thinking in java"/> </ td>
<Td> Thinking in java </td>
<Td> Bruce Eckel </td>
& Lt; td & gt; Feb 2006 & lt;/td & gt;
<Td> $33.02 </td>
</Tr>
<Tr>
<Td> /images/jQuery.jpg" width = "40" height = "50" 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>
</Html>
Step 1: add the alternate background of parity rows for the table
Copy codeThe Code is as follows: <style type = "text/css">
. Even {
Background-color: # E8A824;
}
. Odd {
Background-color: # 74411B;
}
</Style>
Step 2: sort by letter
Sort table-based Title Columns
<Thclass = "sort-alpha"> Title </th>
Defines a sort-alpha Class for TitleCopy codeThe Code is 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>
Last
When you click Title
Final effect:
Sort other types as follows:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
