ajax 点击列名排序,jQuery+Ajax实现表格数据不同列标题排序(为表格注入活力)

表格大家都十分熟悉，如今的CSS也使得表格的布局越来越光彩耀人。但是，无论如何，都掩饰不了那些包装下的死板。

那么如何让那些死板的数据 更具有可读性、可用性，能够让我们那些数据在“动”呢？

下面我们使用jquery+ajax 来为表格注入些活力。主要实现的目的就是：将表格的列标题转化为按钮，点击不同的列标题，便按相应的列对数据进行排序。比如学生信息表，我点击“生日”列，这张表便按生日排序将结果呈现在我们面前。使用ajax来调用本页也避免了刷新页面所带来的折磨。

下面我给出最基本的jsp页面

 

详细代码如下

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

My JSP 'sorttable.jsp' starting page

TitleAuthorPublishDatePrice

JavaScript Douglas Crockford May 2008$31.02 AJAX and PHP:Building Responsive Web ApplicationsCristian Darie,Mihak Bucica Mar 2006$31.02 Learning MamboDouglas Paterson Mar 2006$31.02 Thinking in javaBruce Eckel Feb 2006$33.02 jQuery in Action, Second EditionBear Bibeault / Yehuda Katz Apr 2010$35.02

第一步：为表格添加奇偶行交替背景

 

.even{

background-color: #E8A824;

}

.odd{

background-color:#74411B;

}

第二步：按字母排序

实现基于表格的Title列进行排序

Title

为Title定义了一个sort-alpha类

$(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

if(keyA>keyB) return 1;

return 0;

});

$.each(rows,function(index,row){

$table.children('tbody').append(row);

});

alternateRowColors($table);

});

}

});

});

});

最后

当你点击Title时

最终效果：

 

其他类型的排序如下：