本篇內(nèi)容主要講解“怎么用jQuery+Ajax實(shí)現(xiàn)表格數(shù)據(jù)不同列標(biāo)題排序”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么用jQuery+Ajax實(shí)現(xiàn)表格數(shù)據(jù)不同列標(biāo)題排序”吧!

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名申請(qǐng)、虛擬主機(jī)、營銷軟件、網(wǎng)站建設(shè)、喀什網(wǎng)站維護(hù)、網(wǎng)站推廣。

表格大家都十分熟悉，如今的CSS也使得表格的布局越來越光彩耀人。但是，無論如何，都掩飾不了那些包裝下的死板。

那么如何讓那些死板的數(shù)據(jù) 更具有可讀性、可用性，能夠讓我們那些數(shù)據(jù)在“動(dòng)”呢？

下面我們使用jquery+ajax 來為表格注入些活力。主要實(shí)現(xiàn)的目的就是：將表格的列標(biāo)題轉(zhuǎn)化為按鈕，點(diǎn)擊不同的列標(biāo)題，便按相應(yīng)的列對(duì)數(shù)據(jù)進(jìn)行排序。比如學(xué)生信息表，我點(diǎn)擊“生日”列，這張表便按生日排序?qū)⒔Y(jié)果呈現(xiàn)在我們面前。使用ajax來調(diào)用本頁也避免了刷新頁面所帶來的折磨。
下面我給出最基本的jsp頁面
 
詳細(xì)代碼如下

復(fù)制代碼 代碼如下:

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>



">

	Title	Author	PublishDate	Price
	JavaScript	Douglas Crockford	May 2008	$31.02
	AJAX and PHP:Building Responsive Web Applications	Cristian Darie,Mihak Bucica	Mar 2006	$31.02
	Learning Mambo	Douglas Paterson	Mar 2006	$31.02
	Thinking in java	Bruce Eckel	Feb 2006	$33.02
	jQuery in Action, Second Edition	Bear Bibeault / Yehuda Katz	Apr 2010	$35.02

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

復(fù)制代碼 代碼如下:

第二步：按字母排序
實(shí)現(xiàn)基于表格的Title列進(jìn)行排序
Title
為Title定義了一個(gè)sort-alpha類

復(fù)制代碼 代碼如下:

最后
當(dāng)你點(diǎn)擊Title時(shí)
最終效果：

到此，相信大家對(duì)“怎么用jQuery+Ajax實(shí)現(xiàn)表格數(shù)據(jù)不同列標(biāo)題排序”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)建站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

分享文章：怎么用jQuery+Ajax實(shí)現(xiàn)表格數(shù)據(jù)不同列標(biāo)題排序-創(chuàng)新互聯(lián)
文章來源：http://weahome.cn/article/csgsop.html