jQuery+Ajax实现表格数据不同列标题排序(为表格注
基本JSP页面代码(狼蚁网站SEO优化)
```html
<%@ page language="java" import="java.util" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
.even { background-color: E8A824; }
.odd { background-color:74411B; }
$(document).ready(function(){
// Function to alternate row colors
var alternateRowColors = function($table){
$('tbody tr:odd', $table).removeClass('even').addClass('odd');
$('tbody tr:even', $table).removeClass('odd').addClass('even');
};
// Apply to each table.sorttable
$('table.sorttable').each(function (){
var $table = $(this);
alternateRowColors($table);
// Sort based on Title column when clicked
$('th', $table).each(function(column){
var $header = $(this);
if($header.hasClass('sort-alpha')){ // Title column has sort-alpha class
$header.addClass('clickable').hover(function(){ // Add hover effect on click
$header.addClass('hover');
}, function(){ // Remove hover on mouse out
$header.removeClass('hover');
}).click(function(){ // Sort when clicked
var rows = $table.find('tbody>tr').get(); // Get all rows in table
rows.sort(function(a, b){ // Sort rows based on Title column text (case insensitive)
var keyA = $(a).children('td').eq(column).text().toUpperCase(); // Upper case for comparison
var keyB = $(b).children('td').eq(column).text().toUpperCase(); // Upper case for comparison too
if (keyA < keyB) return -1; // Sort in ascending order if A comes before B in lexicographical order (case insensitive)
if (keyA > keyB) return 1; // Sort in descending order if A comes after B in lexicographical order (case insensitive)
return 0; // If both A and B are equal, do not change their order in the array (keep them in original order)
});
$.each(rows, function(index, row){ // Append sorted rows back to the table body
$table.children('tbody').append(row);
});
alternateRowColors($table); // Reapply alternating row colors after sorting
});
}
});
});
});