jQuery+Ajax實現(xiàn)表格數(shù)據(jù)不同列標題排序(為表格注入活力)_AJAX教程
      
編輯Tag賺U幣
      




      

      推薦：利用Ajax實現(xiàn)在腳本里傳值實例介紹
      Ajax實現(xiàn)在腳本里傳值可以解決實際上的一些問題，本文實現(xiàn)了一下，感興趣的朋友可以參考下，希望可以幫助到你
      表格大家都十分熟悉，如今的CSS也使得表格的布局越來越光彩耀人。但是，無論如何，都掩飾不了那些包裝下的死板。 

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

      下面我們使用jquery+ajax 來為表格注入些活力。主要實現(xiàn)的目的就是：將表格的列標題轉化為按鈕，點擊不同的列標題，便按相應的列對數(shù)據(jù)進行排序。比如學生信息表，我點擊“生日”列，這張表便按生日排序將結果呈現(xiàn)在我們面前。使用ajax來調用本頁也避免了刷新頁面所帶來的折磨。 
      下面我給出最基本的jsp頁面 
       
      詳細代碼如下 
      復制代碼 代碼如下:www.wf0088.com
       
      <%@ 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="<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> 
       
      第一步：為表格添加奇偶行交替背景
       
      復制代碼 代碼如下:www.wf0088.com
       
      <style type="text/css"> 
      .even{ 
      background-color: #E8A824; 
      } 
      .odd{ 
      background-color:#74411B; 
      } 
      </style> 
       
      第二步：按字母排序 
      實現(xiàn)基于表格的Title列進行排序 
      <thclass="sort-alpha">Title</th> 
      為Title定義了一個sort-alpha類 
      復制代碼 代碼如下:www.wf0088.com
       
      <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時 
      最終效果： 
       
      其他類型的排序如下：
      分享：JQuery+ajax實現(xiàn)批量上傳圖片(自寫)
      jquery+ajax方式實現(xiàn)單張圖片上傳的代碼是可以搜的到，實現(xiàn)批量上傳圖片的程序卻沒搜索到于是自己寫了個，感興趣的朋友可以參考下
      


      

      


      來源：模板無憂//所屬分類：AJAX教程/更新時間：2013-04-27


      


      



      


      



      相關AJAX教程：