jQuery+Ajax實作表格資料標題排序
这次给大家带来jQuery+Ajax实现表格数据标题排序，jQuery+Ajax实现表格数据标题排序的注意事项有哪些，下面就是实战案例，一起来看一下。
表格大家都十分熟悉，如今的CSS也使得表格的布局越来越光彩耀人。但是，无论如何，都掩饰不了那些包装下的死板。
那么如何让那些死板的数据 更具有可读性、可用性，能够让我们那些数据在“动”呢？
下面我们使用jquery+ajax 来为表格注入些活力。主要实现的目的就是：将表格的列标题转化为按钮，点击不同的列标题，便按相应的列对数据进行排序。比如学生信息表，我点击“生日”列，这张表便按生日排序将结果呈现在我们面前。使用ajax来调用本页也避免了刷新页面所带来的折磨。
下面我给出最基本的jsp页面 
<%@ 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><img src="<%=path %>/images/javascript.jpg" width="40" height="50" alt="JavaScript" /></td> <td>JavaScript</td> <td> Douglas Crockford </td> <td> May 2008</td> <td>$31.02</td> </tr> <tr> <td><img src="<%=path %>/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><img src="<%=path %>/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><img src="<%=path %>/images/Think.jpg" width="40" height="50" 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><img src="<%=path %>/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>
第一步：为表格添加奇偶行交替背景
<style type="text/css">
.even{
background-color: #E8A824;
}
.odd{
background-color:#74411B;
}
</style>第二步：按字母排序
实现基于表格的Title列进行排序
<thclass="sort-alpha">Title</th>
为Title定义了一个sort-alpha类
<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>最后
当你点击Title时
最终效果： 
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是jQuery+Ajax實作表格資料標題排序的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
使用ddrescue在Linux上恢復數據
Mar 20, 2024 pm 01:37 PM
DDREASE是一種用於從檔案或區塊裝置(如硬碟、SSD、RAM磁碟、CD、DVD和USB儲存裝置)復原資料的工具。它將資料從一個區塊設備複製到另一個區塊設備，留下損壞的資料區塊，只移動好的資料區塊。 ddreasue是一種強大的恢復工具，完全自動化，因為它在恢復操作期間不需要任何干擾。此外，由於有了ddasue地圖文件，它可以隨時停止和恢復。 DDREASE的其他主要功能如下：它不會覆寫恢復的數據，但會在迭代恢復的情況下填補空白。但是，如果指示工具明確執行此操作，則可以將其截斷。將資料從多個檔案或區塊還原到單
開源！超越ZoeDepth！ DepthFM：快速且精確的單目深度估計！
Apr 03, 2024 pm 12:04 PM
0.這篇文章乾了啥？提出了DepthFM：一個多功能且快速的最先進的生成式單目深度估計模型。除了傳統的深度估計任務外，DepthFM還展示了在深度修復等下游任務中的最先進能力。 DepthFM效率高，可以在少數推理步驟內合成深度圖。以下一起來閱讀這項工作~1.論文資訊標題：DepthFM:FastMonocularDepthEstimationwithFlowMatching作者：MingGui,JohannesS.Fischer,UlrichPrestel,PingchuanMa,Dmytr
如何多條件使用Excel過濾功能
Feb 26, 2024 am 10:19 AM
如果您需要了解如何在Excel中使用具有多個條件的篩選功能，以下教學將引導您完成對應步驟，確保您可以有效地篩選資料和排序資料。 Excel的篩選功能是非常強大的，能夠幫助您從大量資料中提取所需的資訊。這個功能可以根據您設定的條件，過濾資料並只顯示符合條件的部分，讓資料的管理變得更有效率。透過使用篩選功能，您可以快速找到目標數據，節省了尋找和整理數據的時間。這個功能不僅可以應用在簡單的資料清單上，還可以根據多個條件進行篩選，幫助您更精準地定位所需資訊。總的來說，Excel的篩選功能是一個非常實用的
Google狂喜：JAX性能超越Pytorch、TensorFlow！或成GPU推理訓練最快選擇
Apr 01, 2024 pm 07:46 PM
谷歌力推的JAX在最近的基準測試中表現已經超過Pytorch和TensorFlow，7項指標排名第一。而且測試並不是JAX性能表現最好的TPU上完成的。雖然現在在開發者中，Pytorch依然比Tensorflow更受歡迎。但未來，也許有更多的大型模型會基於JAX平台進行訓練和運行。模型最近，Keras團隊為三個後端（TensorFlow、JAX、PyTorch）與原生PyTorch實作以及搭配TensorFlow的Keras2進行了基準測試。首先，他們為生成式和非生成式人工智慧任務選擇了一組主流
iPhone上的蜂窩數據網路速度慢：修復
May 03, 2024 pm 09:01 PM
在iPhone上面臨滯後，緩慢的行動數據連線？通常，手機上蜂窩互聯網的強度取決於幾個因素，例如區域、蜂窩網絡類型、漫遊類型等。您可以採取一些措施來獲得更快、更可靠的蜂窩網路連線。修復1–強制重啟iPhone有時，強制重啟設備只會重置許多內容，包括蜂窩網路連線。步驟1–只需按一次音量調高鍵並放開即可。接下來，按降低音量鍵並再次釋放它。步驟2–過程的下一部分是按住右側的按鈕。讓iPhone完成重啟。啟用蜂窩數據並檢查網路速度。再次檢查修復2–更改資料模式雖然5G提供了更好的網路速度，但在訊號較弱
特斯拉機器人進廠打工，馬斯克：手的自由度今年將達到22個！
May 06, 2024 pm 04:13 PM
特斯拉機器人Optimus最新影片出爐，已經可以在工廠裡打工了。正常速度下，它分揀電池（特斯拉的4680電池）是這樣的：官方還放出了20倍速下的樣子——在小小的「工位」上，揀啊揀啊揀：這次放出的影片亮點之一在於Optimus在廠子裡完成這項工作，是完全自主的，全程沒有人為的干預。而且在Optimus的視角之下，它還可以把放歪了的電池重新撿起來放置，主打一個自動糾錯：對於Optimus的手，英偉達科學家JimFan給出了高度的評價：Optimus的手是全球五指機器人裡最靈巧的之一。它的手不僅有觸覺
阿里7B多模態文件理解大模型拿下新SOTA
Apr 02, 2024 am 11:31 AM
多模態文件理解能力新SOTA！阿里mPLUG團隊發布最新開源工作mPLUG-DocOwl1.5，針對高解析度圖片文字辨識、通用文件結構理解、指令遵循、外部知識引入四大挑戰，提出了一系列解決方案。話不多說，先來看效果。複雜結構的圖表一鍵識別轉換為Markdown格式：不同樣式的圖表都可以：更細節的文字識別和定位也能輕鬆搞定：還能對文檔理解給出詳細解釋：要知道，“文檔理解”目前是大語言模型實現落地的一個重要場景，市面上有許多輔助文檔閱讀的產品，有的主要透過OCR系統進行文字識別，配合LLM進行文字理
超級智能體生命力覺醒！可自我更新的AI來了，媽媽再也不用擔心資料瓶頸難題
Apr 29, 2024 pm 06:55 PM
哭死啊，全球狂煉大模型，一網路的資料不夠用，根本不夠用。訓練模型搞得跟《飢餓遊戲》似的，全球AI研究者，都在苦惱怎麼才能餵飽這群資料大胃王。尤其在多模態任務中，這問題尤其突出。一籌莫展之際，來自人大系的初創團隊，用自家的新模型，率先在國內把「模型生成數據自己餵自己」變成了現實。而且還是理解側和生成側雙管齊下，兩側都能產生高品質、多模態的新數據，對模型本身進行數據反哺。模型是啥？中關村論壇上剛露面的多模態大模型Awaker1.0。團隊是誰？智子引擎。由人大高瓴人工智慧學院博士生高一鑷創立，高
