jQuery整理筆記9----函數形式發展

時間 2019-11-26

原文原文鏈接

在一些照片中使用演示樣本、插入、樣式文件下載：點我進入下載javascript

過去在開發過程當中關於table方面的jquery應用不過侷限於使用jquery操做table添加一行、刪除一列等等操做。今天整理的跟過去用的不同。php

一、uiTableFilter
css

uiTableFilter是一款表格數據行過濾插件，使用很是easy,詳細使用方法例如如下：
html

$.uiTableFilter(table,phrase) 該函數包括兩個參數,當中第一個參數爲jQuery對象,即爲jQuery方法匹配的表格,或者也可以是jQuery匹配到的多個表格數據行。第二個參數表示匹配的keyword,以字符串形式傳遞。java

另外,還可包括兩個可選參數,分別設置限制列和隱藏元素。jquery

代碼演示樣例：
web

<span style="font-family:SimSun;font-size:12px;"><span style="font-family:SimSun;font-size:12px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>uitablefilter</title>
<link href="images/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="images/table.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="jquery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="plugins/jquery.uitablefilter.js"></script>
<script type="text/javascript">
$(function(){
	var theTable = $('table#grid')
	$("#filter").keyup(function() {
		$.uiTableFilter( theTable, this.value );
	})
})
</script>
</head>
<body>
<h3>uiTableFilter表格行過濾</h3>
<p class="info">
	<form id="filter-form">過濾keyword: 
		<input name="filter" id="filter" value="" maxlength="30" size="30" type="text">
	</form>
</p>
<table id="grid">
    <tr>
        <th nowrap="nowrap">排名</th>
        <th nowrap="nowrap">校名</th>
        <th nowrap="nowrap">總得分</th>
        <th nowrap="nowrap">人才培養總得分</th>
        <th nowrap="nowrap">研究生培養得分</th>
        <th nowrap="nowrap">本科生培養得分</th>
        <th nowrap="nowrap">科學研究總得分</th>
        <th nowrap="nowrap">天然科學研究得分</th>
        <th nowrap="nowrap">社會科學研究得分</th>
        <th nowrap="nowrap">所屬省份</th>
        <th nowrap="nowrap">分省排名</th>
        <th nowrap="nowrap">學校類型</th>
    </tr>
    <tr>
        <td>1</td>
        <td>清華大學 </td>
        <td>296.77</td>
        <td>128.92</td>
        <td>93.83</td>
        <td>35.09</td>
        <td>167.85</td>
        <td>148.47</td>
        <td>19.38</td>
        <td width="16">京 </td>
        <td width="12">1 </td>
        <td>理工 </td>
    </tr>
    <tr>
        <td>2</td>
        <td>北京大學 </td>
        <td>222.02</td>
        <td>102.11</td>
        <td>66.08</td>
        <td>36.03</td>
        <td>119.91</td>
        <td>86.78</td>
        <td>33.13</td>
        <td>京 </td>
        <td>2 </td>
        <td>綜合 </td>
    </tr>
    <tr>
        <td>3</td>
        <td>浙江大學 </td>
        <td>205.65</td>
        <td>94.67</td>
        <td>60.32</td>
        <td>34.35</td>
        <td>110.97</td>
        <td>92.32</td>
        <td>18.66</td>
        <td>浙 </td>
        <td>1</td>
        <td>綜合 </td>
    </tr>
    <tr>
        <td>4</td>
        <td>上海交大</td>
        <td>150.98</td>
        <td>67.08</td>
        <td>47.13</td>
        <td>19.95</td>
        <td>83.89</td>
        <td>77.49</td>
        <td>6.41</td>
        <td>滬 </td>
        <td>1</td>
        <td>綜合 </td>
    </tr>
    <tr>
        <td>5</td>
        <td>南京大學</td>
        <td>136.49</td>
        <td>62.84</td>
        <td>40.21</td>
        <td>22.63</td>
        <td>73.65</td>
        <td>53.87</td>
        <td>19.78</td>
        <td>蘇</td>
        <td>1</td>
        <td>綜合 </td>
    </tr>
    <tr>
        <td>6</td>
        <td>復旦大學 </td>
        <td>136.36</td>
        <td>63.57</td>
        <td>40.26</td>
        <td>23.31</td>
        <td>72.78</td>
        <td>51.47</td>
        <td>21.31</td>
        <td>滬</td>
        <td>2</td>
        <td>綜合 </td>
    </tr>
    <tr>
        <td>7</td>
        <td>華中科大</td>
        <td>110.08</td>
        <td>54.76</td>
        <td>30.26</td>
        <td>24.50</td>
        <td>55.32</td>
        <td>47.45</td>
        <td>7.87</td>
        <td>鄂 </td>
        <td>1</td>
        <td>理工 </td>
    </tr>
    <tr>
        <td>8</td>
        <td>武漢大學 </td>
        <td>103.82</td>
        <td>50.21</td>
        <td>29.37</td>
        <td>20.84</td>
        <td>53.61</td>
        <td>36.17</td>
        <td>17.44</td>
        <td>鄂 </td>
        <td>2</td>
        <td>綜合</td>
    </tr>
    <tr>
        <td>9</td>
        <td>吉林大學 </td>
        <td>96.44</td>
        <td>48.61</td>
        <td>25.74</td>
        <td>22.87</td>
        <td>47.83</td>
        <td>38.13</td>
        <td>9.70</td>
        <td>吉 </td>
        <td>1</td>
        <td>綜合</td>
    </tr>
    <tr>
        <td>10</td>
        <td>西安交大</td>
        <td>92.82</td>
        <td>47.22</td>
        <td>24.54</td>
        <td>22.68</td>
        <td>45.60</td>
        <td>35.47</td>
        <td>10.13</td>
        <td>陝</td>
        <td>1</td>
        <td>綜合</td>
    </tr>
</table>
</body>
</html></span></span>

效果圖：

聯繫實際：
sql

（1）、這個插件僅僅針對table內的數據進行過濾,咱們在通常的web項目開發中假設數據量的習慣用分頁,分頁一般是後臺sql語句或者其它方法實現的,總之,傳到web頁面的數據一數據庫

般是10條或者20條,這個時候這個插件就僅僅能針對本頁的數據進行排序了,假設需求僅僅針對當前頁進行過濾,那才幹夠使用。jquery插件

（2）、假設頁面數據量不大（幾十條或者幾百條）,那咱們沒有必要分頁,頁面加一個滾動欄把全部數據都放在表格裏便可了.這時候這個過濾就可以應用到全部的數據了。

（3）、曾經作的項目中對錶格進行過濾的時候習慣於將各個列的過濾條件分開,好比名稱是一個過濾條件,血量值又是一個過濾條件。現在這個插件是針對所有的列作統一的過

濾,我感受在特定的情景下用起來也是不錯的。

（4）、這個插件的過濾由jquery插件完畢,免去了對後臺的請求,也免去了某些數據庫的操做。

二、tablesorter表格排序

tablesorter是一個數據表格排序插件,它針對標準的表格結構,意思是說表格結構中必須包括<thed>和<tbody>標籤。在不需要頁面刷新的狀況下,tablesorter插件能夠依據列數據

類型進行排序。

tablesorter插件具備例如如下特色：

（1）、能夠依據多列數據進行排序。

（2）、能夠本身主動分析text(文本)、URL字符串、整數、貨幣、浮點數、IP、日期時間等數據格式,也能夠輕鬆本身定義數據類型,並依據這些數據類型進行排序

（3）、支持二次隱形排序,如依據其它標準進行排序時,也維護字母排序

使用示比例如如下：

<span style="font-family:SimSun;font-size:12px;"><span style="font-family:SimSun;font-size:12px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tablesorter</title>
<link href="images/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="images/table.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="jquery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="plugins/jquery.tablesorter.js"></script>
<script type="text/javascript">
$(function(){
	$('table#grid').tablesorter();
})
</script>
</head>
<body>
<h3>tablesorter表格排序</h3>
<table id="grid">
    <thead>
        <tr>
            <th nowrap="nowrap">排名</th>
            <th nowrap="nowrap">校名</th>
            <th nowrap="nowrap">總得分</th>
            <th nowrap="nowrap">人才培養總得分</th>
            <th nowrap="nowrap">研究生培養得分</th>
            <th nowrap="nowrap">本科生培養得分</th>
            <th nowrap="nowrap">科學研究總得分</th>
            <th nowrap="nowrap">天然科學研究得分</th>
            <th nowrap="nowrap">社會科學研究得分</th>
            <th nowrap="nowrap">所屬省份</th>
            <th nowrap="nowrap">分省排名</th>
            <th nowrap="nowrap">學校類型</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>清華大學 </td>
            <td>296.77</td>
            <td>128.92</td>
            <td>93.83</td>
            <td>35.09</td>
            <td>167.85</td>
            <td>148.47</td>
            <td>19.38</td>
            <td width="16">京 </td>
            <td width="12">1 </td>
            <td>理工 </td>
        </tr>
        <tr>
            <td>2</td>
            <td>北京大學 </td>
            <td>222.02</td>
            <td>102.11</td>
            <td>66.08</td>
            <td>36.03</td>
            <td>119.91</td>
            <td>86.78</td>
            <td>33.13</td>
            <td>京 </td>
            <td>2 </td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>3</td>
            <td>浙江大學 </td>
            <td>205.65</td>
            <td>94.67</td>
            <td>60.32</td>
            <td>34.35</td>
            <td>110.97</td>
            <td>92.32</td>
            <td>18.66</td>
            <td>浙 </td>
            <td>1</td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>4</td>
            <td>上海交大</td>
            <td>150.98</td>
            <td>67.08</td>
            <td>47.13</td>
            <td>19.95</td>
            <td>83.89</td>
            <td>77.49</td>
            <td>6.41</td>
            <td>滬 </td>
            <td>1</td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>5</td>
            <td>南京大學</td>
            <td>136.49</td>
            <td>62.84</td>
            <td>40.21</td>
            <td>22.63</td>
            <td>73.65</td>
            <td>53.87</td>
            <td>19.78</td>
            <td>蘇</td>
            <td>1</td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>6</td>
            <td>復旦大學 </td>
            <td>136.36</td>
            <td>63.57</td>
            <td>40.26</td>
            <td>23.31</td>
            <td>72.78</td>
            <td>51.47</td>
            <td>21.31</td>
            <td>滬</td>
            <td>2</td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>7</td>
            <td>華中科大</td>
            <td>110.08</td>
            <td>54.76</td>
            <td>30.26</td>
            <td>24.50</td>
            <td>55.32</td>
            <td>47.45</td>
            <td>7.87</td>
            <td>鄂 </td>
            <td>1</td>
            <td>理工 </td>
        </tr>
        <tr>
            <td>8</td>
            <td>武漢大學 </td>
            <td>103.82</td>
            <td>50.21</td>
            <td>29.37</td>
            <td>20.84</td>
            <td>53.61</td>
            <td>36.17</td>
            <td>17.44</td>
            <td>鄂 </td>
            <td>2</td>
            <td>綜合</td>
        </tr>
        <tr>
            <td>9</td>
            <td>吉林大學 </td>
            <td>96.44</td>
            <td>48.61</td>
            <td>25.74</td>
            <td>22.87</td>
            <td>47.83</td>
            <td>38.13</td>
            <td>9.70</td>
            <td>吉 </td>
            <td>1</td>
            <td>綜合</td>
        </tr>
        <tr>
            <td>10</td>
            <td>西安交大</td>
            <td>92.82</td>
            <td>47.22</td>
            <td>24.54</td>
            <td>22.68</td>
            <td>45.60</td>
            <td>35.47</td>
            <td>10.13</td>
            <td>陝</td>
            <td>1</td>
            <td>綜合</td>
        </tr>
    </tbody>
</table>
</body>
</html></span></span>

效果圖：

單擊校名稱後效果圖例如如下：

固然,咱們也可以在tablesorter()函數內傳遞值,直接初始化排序列和方法,好比如下代碼將依照數據表格的第一、2列進行排序,排序方法是升序。

<span style="font-family:SimSun;font-size:12px;"><span style="font-family:SimSun;font-size:12px;">$(function(){
	$('table#grid').tablesorter({
		sortList: [[0,0], [1,0]]
	 });
})</span></span>

參數sortList表示排序列以及排序方式,排序方式的定義是0表明升序,1表明降序。除了這個參數外,tablesorter插件還包括多個參數，參數例如如下表所看到的：

**tablesorter插件參數說明**
參數	數據類型	默認值	說明
sortList	Array		格式爲[[columnIndex,sortDirection],....]當中columnIndex是列的索引號,從左到右以0開始,sortDirection取值0表示升序,取值1表示降序。好比,[[0,0],[1,1]]
sortMultiSortKey	String	shiftKey	選擇多列排序的時候按住哪一個鍵
textExtraction	String或function	simple	定義使用哪一種方法來提取一個單元格的數據表進行排序。取值包含simple、complex和本身定義函數。
headers	Object		定義每一列的排序控制指令
sortForce	Array		用於加入額外的強制排序,將被追加到用戶的動態選擇。好比,可用於按字母順序排序後,其它用戶選擇的排序,在處理如因同一日期或貨幣值的行的結果。它可以幫助好像是隨機次要排序數據。
widthFixed	Boolean	false	指示是否tablesorter應適用於固定寬度的表列。
cancelSelection	Boolean	true	指示表頭的文本禁止選擇,使頭部看起來像個button的樣子
cssHeader	String	header	定義表頭樣式表
cssAsc	String	headerSortUp	定義依照升序排序時表頭的樣式名
cssDesc	String	headerSortDesc	定義依照降序排序時表頭的樣式名
debug	Boolean	false	是否應顯示調試執行tablesorter的實用信息

好比,在如下演示樣例不只設置了sortList參數使之默認依照第一列和第二列升序排列,而且經過爲cssAsc和cssDesc參數指定不一樣的樣式,設計當對列排序時，能夠本身主動提示當前數據

排序的列及排序的方向。

<span style="font-family:SimSun;font-size:12px;"><span style="font-family:SimSun;font-size:12px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tablesorter</title>
<link href="images/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="images/table.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="jquery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="plugins/jquery.tablesorter.js"></script>
<script type="text/javascript">
$(function(){
	$('table#grid').tablesorter({
		sortList: [[0,0], [1,0]],
		cancelSelection:true,
		cssAsc:"up",
		cssDesc:"down"
	 });
})
</script>
<style type="text/css">
th.up {
	background: url(images/asc.gif) no-repeat right center;    
    color:red;
}
th.down {
	background: url(images/desc.gif) no-repeat right center;
    color:red;
}
</style>
</head>
<body>
<h3>tablesorter表格排序</h3>
<table id="grid">
    <thead>
        <tr>
            <th nowrap="nowrap">排名</th>
            <th nowrap="nowrap">校名</th>
            <th nowrap="nowrap">總得分</th>
            <th nowrap="nowrap">人才培養總得分</th>
            <th nowrap="nowrap">研究生培養得分</th>
            <th nowrap="nowrap">本科生培養得分</th>
            <th nowrap="nowrap">科學研究總得分</th>
            <th nowrap="nowrap">天然科學研究得分</th>
            <th nowrap="nowrap">社會科學研究得分</th>
            <th nowrap="nowrap">所屬省份</th>
            <th nowrap="nowrap">分省排名</th>
            <th nowrap="nowrap">學校類型</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>清華大學 </td>
            <td>296.77</td>
            <td>128.92</td>
            <td>93.83</td>
            <td>35.09</td>
            <td>167.85</td>
            <td>148.47</td>
            <td>19.38</td>
            <td width="16">京 </td>
            <td width="12">1 </td>
            <td>理工 </td>
        </tr>
        <tr>
            <td>2</td>
            <td>北京大學 </td>
            <td>222.02</td>
            <td>102.11</td>
            <td>66.08</td>
            <td>36.03</td>
            <td>119.91</td>
            <td>86.78</td>
            <td>33.13</td>
            <td>京 </td>
            <td>2 </td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>3</td>
            <td>浙江大學 </td>
            <td>205.65</td>
            <td>94.67</td>
            <td>60.32</td>
            <td>34.35</td>
            <td>110.97</td>
            <td>92.32</td>
            <td>18.66</td>
            <td>浙 </td>
            <td>1</td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>4</td>
            <td>上海交大</td>
            <td>150.98</td>
            <td>67.08</td>
            <td>47.13</td>
            <td>19.95</td>
            <td>83.89</td>
            <td>77.49</td>
            <td>6.41</td>
            <td>滬 </td>
            <td>1</td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>5</td>
            <td>南京大學</td>
            <td>136.49</td>
            <td>62.84</td>
            <td>40.21</td>
            <td>22.63</td>
            <td>73.65</td>
            <td>53.87</td>
            <td>19.78</td>
            <td>蘇</td>
            <td>1</td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>6</td>
            <td>復旦大學 </td>
            <td>136.36</td>
            <td>63.57</td>
            <td>40.26</td>
            <td>23.31</td>
            <td>72.78</td>
            <td>51.47</td>
            <td>21.31</td>
            <td>滬</td>
            <td>2</td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>7</td>
            <td>華中科大</td>
            <td>110.08</td>
            <td>54.76</td>
            <td>30.26</td>
            <td>24.50</td>
            <td>55.32</td>
            <td>47.45</td>
            <td>7.87</td>
            <td>鄂 </td>
            <td>1</td>
            <td>理工 </td>
        </tr>
        <tr>
            <td>8</td>
            <td>武漢大學 </td>
            <td>103.82</td>
            <td>50.21</td>
            <td>29.37</td>
            <td>20.84</td>
            <td>53.61</td>
            <td>36.17</td>
            <td>17.44</td>
            <td>鄂 </td>
            <td>2</td>
            <td>綜合</td>
        </tr>
        <tr>
            <td>9</td>
            <td>吉林大學 </td>
            <td>96.44</td>
            <td>48.61</td>
            <td>25.74</td>
            <td>22.87</td>
            <td>47.83</td>
            <td>38.13</td>
            <td>9.70</td>
            <td>吉 </td>
            <td>1</td>
            <td>綜合</td>
        </tr>
        <tr>
            <td>10</td>
            <td>西安交大</td>
            <td>92.82</td>
            <td>47.22</td>
            <td>24.54</td>
            <td>22.68</td>
            <td>45.60</td>
            <td>35.47</td>
            <td>10.13</td>
            <td>陝</td>
            <td>1</td>
            <td>綜合</td>
        </tr>
    </tbody>
</table>
</body>
</html></span></span>

效果圖例如如下：

當咱們點擊總得分進行排序效果：

咱們還可以按住shift鍵點擊多列是表格依照多列進行排序：

聯繫實際：

記得曾經在聯通作過一個IOM項目,需要的需求就是點擊列頭可以依照該列進行排序,當時是在網上找的一個樣例實現的,現在拿出來那個樣例一看很是麻煩而且存在着一些問

題,jquery提供的tablesorter插件完美的封裝了表格的排序,而且可以按住shift鍵選擇多列進行排序,用在項目中仍是有助於提升產品的用戶體驗的。

三、HeadColor表格顏色

HeadColor可讓你依據元素的值來爲元素設置顏色。

該插件能夠依據預設的顏色範圍進行比較,最後本身主動設置單元格的顏色值。

代碼演示樣例：

<span style="font-family:SimSun;font-size:12px;"><span style="font-family:SimSun;font-size:12px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tablesorter</title>
<link href="images/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="images/table.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="jquery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="plugins/jquery.heatcolor.0.0.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#grid > tbody > tr").heatcolor(
		function() { return $("td:nth-child(3)", this).text(); }
	);
})
</script>
</head>
<body>
<h3>HeatColor表格顏色</h3>
<table id="grid">
    <thead>
        <tr>
            <th nowrap="nowrap">排名</th>
            <th nowrap="nowrap">校名</th>
            <th nowrap="nowrap">總得分</th>
            <th nowrap="nowrap">人才培養總得分</th>
            <th nowrap="nowrap">研究生培養得分</th>
            <th nowrap="nowrap">本科生培養得分</th>
            <th nowrap="nowrap">科學研究總得分</th>
            <th nowrap="nowrap">天然科學研究得分</th>
            <th nowrap="nowrap">社會科學研究得分</th>
            <th nowrap="nowrap">所屬省份</th>
            <th nowrap="nowrap">分省排名</th>
            <th nowrap="nowrap">學校類型</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>清華大學 </td>
            <td>296.77</td>
            <td>128.92</td>
            <td>93.83</td>
            <td>35.09</td>
            <td>167.85</td>
            <td>148.47</td>
            <td>19.38</td>
            <td width="16">京 </td>
            <td width="12">1 </td>
            <td>理工 </td>
        </tr>
        <tr>
            <td>2</td>
            <td>北京大學 </td>
            <td>222.02</td>
            <td>102.11</td>
            <td>66.08</td>
            <td>36.03</td>
            <td>119.91</td>
            <td>86.78</td>
            <td>33.13</td>
            <td>京 </td>
            <td>2 </td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>3</td>
            <td>浙江大學 </td>
            <td>205.65</td>
            <td>94.67</td>
            <td>60.32</td>
            <td>34.35</td>
            <td>110.97</td>
            <td>92.32</td>
            <td>18.66</td>
            <td>浙 </td>
            <td>1</td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>4</td>
            <td>上海交大</td>
            <td>150.98</td>
            <td>67.08</td>
            <td>47.13</td>
            <td>19.95</td>
            <td>83.89</td>
            <td>77.49</td>
            <td>6.41</td>
            <td>滬 </td>
            <td>1</td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>5</td>
            <td>南京大學</td>
            <td>136.49</td>
            <td>62.84</td>
            <td>40.21</td>
            <td>22.63</td>
            <td>73.65</td>
            <td>53.87</td>
            <td>19.78</td>
            <td>蘇</td>
            <td>1</td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>6</td>
            <td>復旦大學 </td>
            <td>136.36</td>
            <td>63.57</td>
            <td>40.26</td>
            <td>23.31</td>
            <td>72.78</td>
            <td>51.47</td>
            <td>21.31</td>
            <td>滬</td>
            <td>2</td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>7</td>
            <td>華中科大</td>
            <td>110.08</td>
            <td>54.76</td>
            <td>30.26</td>
            <td>24.50</td>
            <td>55.32</td>
            <td>47.45</td>
            <td>7.87</td>
            <td>鄂 </td>
            <td>1</td>
            <td>理工 </td>
        </tr>
        <tr>
            <td>8</td>
            <td>武漢大學 </td>
            <td>103.82</td>
            <td>50.21</td>
            <td>29.37</td>
            <td>20.84</td>
            <td>53.61</td>
            <td>36.17</td>
            <td>17.44</td>
            <td>鄂 </td>
            <td>2</td>
            <td>綜合</td>
        </tr>
        <tr>
            <td>9</td>
            <td>吉林大學 </td>
            <td>96.44</td>
            <td>48.61</td>
            <td>25.74</td>
            <td>22.87</td>
            <td>47.83</td>
            <td>38.13</td>
            <td>9.70</td>
            <td>吉 </td>
            <td>1</td>
            <td>綜合</td>
        </tr>
        <tr>
            <td>10</td>
            <td>西安交大</td>
            <td>92.82</td>
            <td>47.22</td>
            <td>24.54</td>
            <td>22.68</td>
            <td>45.60</td>
            <td>35.47</td>
            <td>10.13</td>
            <td>陝</td>
            <td>1</td>
            <td>綜合</td>
        </tr>
    </tbody>
</table>
</body>
</html></span></span>

效果圖：

四、Pagination表格分頁顯示

Table Pagination是一款輕量級表格分頁插件。該jQuery插件用於建立一個分頁顯示的數據表格樣式，咱們可以本身定義分頁設置的各類選項，以知足項目需求

代碼演示樣例：

<span style="font-family:SimSun;font-size:12px;"><span style="font-family:SimSun;font-size:12px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table Pagination</title>
<link href="images/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="images/table.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="jquery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="plugins/jquery.tablePagination.0.2.js"></script>
<script type="text/javascript">
$(function(){
	$('table#grid').tablePagination();
})
</script>
<style type="text/css">
#tablePagination {
    text-align:center;
    font-size:12px;
    margin:6px auto;
    height: 20px;
    line-height:20px;   
}
</style>
</head>
<body>
<h3>Pagination表格分頁顯示</h3>
<table id="grid">
    <thead>
        <tr>
            <th nowrap="nowrap">排名</th>
            <th nowrap="nowrap">校名</th>
            <th nowrap="nowrap">總得分</th>
            <th nowrap="nowrap">人才培養總得分</th>
            <th nowrap="nowrap">研究生培養得分</th>
            <th nowrap="nowrap">本科生培養得分</th>
            <th nowrap="nowrap">科學研究總得分</th>
            <th nowrap="nowrap">天然科學研究得分</th>
            <th nowrap="nowrap">社會科學研究得分</th>
            <th nowrap="nowrap">所屬省份</th>
            <th nowrap="nowrap">分省排名</th>
            <th nowrap="nowrap">學校類型</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>清華大學 </td>
            <td>296.77</td>
            <td>128.92</td>
            <td>93.83</td>
            <td>35.09</td>
            <td>167.85</td>
            <td>148.47</td>
            <td>19.38</td>
            <td width="16">京 </td>
            <td width="12">1 </td>
            <td>理工 </td>
        </tr>
        <tr>
            <td>2</td>
            <td>北京大學 </td>
            <td>222.02</td>
            <td>102.11</td>
            <td>66.08</td>
            <td>36.03</td>
            <td>119.91</td>
            <td>86.78</td>
            <td>33.13</td>
            <td>京 </td>
            <td>2 </td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>3</td>
            <td>浙江大學 </td>
            <td>205.65</td>
            <td>94.67</td>
            <td>60.32</td>
            <td>34.35</td>
            <td>110.97</td>
            <td>92.32</td>
            <td>18.66</td>
            <td>浙 </td>
            <td>1</td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>4</td>
            <td>上海交大</td>
            <td>150.98</td>
            <td>67.08</td>
            <td>47.13</td>
            <td>19.95</td>
            <td>83.89</td>
            <td>77.49</td>
            <td>6.41</td>
            <td>滬 </td>
            <td>1</td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>5</td>
            <td>南京大學</td>
            <td>136.49</td>
            <td>62.84</td>
            <td>40.21</td>
            <td>22.63</td>
            <td>73.65</td>
            <td>53.87</td>
            <td>19.78</td>
            <td>蘇</td>
            <td>1</td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>6</td>
            <td>復旦大學 </td>
            <td>136.36</td>
            <td>63.57</td>
            <td>40.26</td>
            <td>23.31</td>
            <td>72.78</td>
            <td>51.47</td>
            <td>21.31</td>
            <td>滬</td>
            <td>2</td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>7</td>
            <td>華中科大</td>
            <td>110.08</td>
            <td>54.76</td>
            <td>30.26</td>
            <td>24.50</td>
            <td>55.32</td>
            <td>47.45</td>
            <td>7.87</td>
            <td>鄂 </td>
            <td>1</td>
            <td>理工 </td>
        </tr>
        <tr>
            <td>8</td>
            <td>武漢大學 </td>
            <td>103.82</td>
            <td>50.21</td>
            <td>29.37</td>
            <td>20.84</td>
            <td>53.61</td>
            <td>36.17</td>
            <td>17.44</td>
            <td>鄂 </td>
            <td>2</td>
            <td>綜合</td>
        </tr>
        <tr>
            <td>9</td>
            <td>吉林大學 </td>
            <td>96.44</td>
            <td>48.61</td>
            <td>25.74</td>
            <td>22.87</td>
            <td>47.83</td>
            <td>38.13</td>
            <td>9.70</td>
            <td>吉 </td>
            <td>1</td>
            <td>綜合</td>
        </tr>
        <tr>
            <td>10</td>
            <td>西安交大</td>
            <td>92.82</td>
            <td>47.22</td>
            <td>24.54</td>
            <td>22.68</td>
            <td>45.60</td>
            <td>35.47</td>
            <td>10.13</td>
            <td>陝</td>
            <td>1</td>
            <td>綜合</td>
        </tr>
    </tbody>
</table>
</body>
</html></span></span>

效果圖：

該樣例應用到的都是Pagination插件提供的默認參數,如下咱們說一下這個插件都有哪些參數可供咱們改動：

firstArrow：定義首頁button圖片的URL，默認值爲./images/first.gif

prevArrow:上一頁button圖片的URL。默認值爲./images/prev.gif

lastArrow:尾頁button圖片的URL,默認值爲./images/last.gif

nextArrow:下一頁button圖片的URL,默認值爲./images/next.gif

rowsPerPage:設置每頁顯示的行數,默認值爲5

currPage:設置當前顯示第幾頁,默以爲1

optionsForRows:定義下拉列表中每頁顯示的行數,默認值爲[5,10,25,50,100]

ignoreRows:設置被忽略的行數,默認值爲[],即顯示所有行數

如下看一個設置了部分參數的樣例：

<span style="font-family:SimSun;font-size:12px;"><span style="font-family:SimSun;font-size:12px;">$(function(){
	$('table#grid').tablePagination({
		currPage : 2, 
        optionsForRows : [2,3,5],
        rowsPerPage : 5
	});
})</span></span>

效果圖：

經過上兩個效果圖咱們看到分頁的標籤都是英文的,假設需要改爲中文的那咱們直接去改插件裏的內容,將引入的js文件jquery.tablePagination.0.2.js改動成例如如下：

<span style="font-family:SimSun;font-size:12px;"><span style="font-family:SimSun;font-size:12px;">/**
 * tablePagination - A table plugin for jQuery that creates pagination elements
 *
 * http://neoalchemy.org/tablePagination.html
 *
 * Copyright (c) 2009 Ryan Zielke (neoalchemy.com)
 * licensed under the MIT licenses:
 * http://www.opensource.org/licenses/mit-license.php
 *
 * @name tablePagination
 * @type jQuery
 * @param Object settings;
 *      firstArrow - Image - Pass in an image to replace default image. Default: (new Image()).src="./images/first.gif"
 *      prevArrow - Image - Pass in an image to replace default image. Default: (new Image()).src="./images/prev.gif"
 *      lastArrow - Image - Pass in an image to replace default image. Default: (new Image()).src="./images/last.gif"
 *      nextArrow - Image - Pass in an image to replace default image. Default: (new Image()).src="./images/next.gif"
 *      rowsPerPage - Number - used to determine the starting rows per page. Default: 5
 *      currPage - Number - This is to determine what the starting current page is. Default: 1
 *      optionsForRows - Array - This is to set the values on the rows per page. Default: [5,10,25,50,100]
 *      ignoreRows - Array - This is to specify which 'tr' rows to ignore. It is recommended that you have those rows be invisible as they will mess with page counts. Default: []
 *
 *
 * @author Ryan Zielke (neoalchemy.org)
 * @version 0.2
 * @requires jQuery v1.2.3 or above
 */

 (function($){

	$.fn.tablePagination = function(settings) {
		var defaults = {  
			firstArrow : (new Image()).src="./images/first.gif",  
			prevArrow : (new Image()).src="./images/prev.gif",
			lastArrow : (new Image()).src="./images/last.gif",
			nextArrow : (new Image()).src="./images/next.gif",
			rowsPerPage : 5,
			currPage : 1,
			optionsForRows : [5,10,25,50,100],
			ignoreRows : []
		};  
		settings = $.extend(defaults, settings);
		
		return this.each(function() {
      var table = $(this)[0];
      var totalPagesId, currPageId, rowsPerPageId, firstPageId, prevPageId, nextPageId, lastPageId
      if (table.id) {
        totalPagesId = '#'+table.id+'+#tablePagination #tablePagination_totalPages';
        currPageId = '#'+table.id+'+#tablePagination #tablePagination_currPage';
        rowsPerPageId = '#'+table.id+'+#tablePagination #tablePagination_rowsPerPage';
        firstPageId = '#'+table.id+'+#tablePagination #tablePagination_firstPage';
        prevPageId = '#'+table.id+'+#tablePagination #tablePagination_prevPage';
        nextPageId = '#'+table.id+'+#tablePagination #tablePagination_nextPage';
        lastPageId = '#'+table.id+'+#tablePagination #tablePagination_lastPage';
      }
      else {
        totalPagesId = '#tablePagination #tablePagination_totalPages';
        currPageId = '#tablePagination #tablePagination_currPage';
        rowsPerPageId = '#tablePagination #tablePagination_rowsPerPage';
        firstPageId = '#tablePagination #tablePagination_firstPage';
        prevPageId = '#tablePagination #tablePagination_prevPage';
        nextPageId = '#tablePagination #tablePagination_nextPage';
        lastPageId = '#tablePagination #tablePagination_lastPage';
      }
      
      var possibleTableRows = $.makeArray($('tbody tr', table));
      var tableRows = $.grep(possibleTableRows, function(value, index) {
        return ($.inArray(value, defaults.ignoreRows) == -1);
      }, false)
      
      var numRows = tableRows.length
      var totalPages = resetTotalPages();
      var currPageNumber = (defaults.currPage > totalPages) ? 1 : defaults.currPage;
      if ($.inArray(defaults.rowsPerPage, defaults.optionsForRows) == -1)
        defaults.optionsForRows.push(defaults.rowsPerPage);
      
      
      function hideOtherPages(pageNum) {
        if (pageNum==0 || pageNum > totalPages)
          return;
        var startIndex = (pageNum - 1) * defaults.rowsPerPage;
        var endIndex = (startIndex + defaults.rowsPerPage - 1);
        $(tableRows).show();
        for (var i=0;i<tableRows.length;i++) {
          if (i < startIndex || i > endIndex) {
            $(tableRows[i]).hide()
          }
        }
      }
      
      function resetTotalPages() {
        var preTotalPages = Math.round(numRows / defaults.rowsPerPage);
        var totalPages = (preTotalPages * defaults.rowsPerPage < numRows) ? preTotalPages + 1 : preTotalPages;
        if ($(totalPagesId).length > 0)
          $(totalPagesId).html(totalPages);
        return totalPages;
      }
      
      function resetCurrentPage(currPageNum) {
        if (currPageNum < 1 || currPageNum > totalPages)
          return;
        currPageNumber = currPageNum;
        hideOtherPages(currPageNumber);
        $(currPageId).val(currPageNumber)
      }
      
      function resetPerPageValues() {
        var isRowsPerPageMatched = false;
        var optsPerPage = defaults.optionsForRows;
        optsPerPage.sort(function (a,b){return a - b;});
        var perPageDropdown = $(rowsPerPageId)[0];
        perPageDropdown.length = 0;
        for (var i=0;i<optsPerPage.length;i++) {
          if (optsPerPage[i] == defaults.rowsPerPage) {
            perPageDropdown.options[i] = new Option(optsPerPage[i], optsPerPage[i], true, true);
            isRowsPerPageMatched = true;
          }
          else {
            perPageDropdown.options[i] = new Option(optsPerPage[i], optsPerPage[i]);
          }
        }
        if (!isRowsPerPageMatched) {
          defaults.optionsForRows == optsPerPage[0];
        }
      }
      
      function createPaginationElements() {
        var htmlBuffer = [];
        htmlBuffer.push("<div id='tablePagination'>");
        htmlBuffer.push("<span id='tablePagination_perPage'>");
		htmlBuffer.push("每頁");
        htmlBuffer.push("<select id='tablePagination_rowsPerPage'><option value='5'>5</option></select>");
		htmlBuffer.push("條  ");
        htmlBuffer.push("</span>");
        htmlBuffer.push("<span id='tablePagination_paginater'>");
        htmlBuffer.push("<img id='tablePagination_firstPage' src='"+defaults.firstArrow+"'>");
        htmlBuffer.push("<img id='tablePagination_prevPage' src='"+defaults.prevArrow+"'>");
        htmlBuffer.push("當前第");
        htmlBuffer.push("<input id='tablePagination_currPage' type='input' value='"+currPageNumber+"' size='1'>");
		htmlBuffer.push("頁 ");
        htmlBuffer.push("共<span id='tablePagination_totalPages'>"+totalPages+"</span>");
		htmlBuffer.push("頁 ");
        htmlBuffer.push("<img id='tablePagination_nextPage' src='"+defaults.nextArrow+"'>");
        htmlBuffer.push("<img id='tablePagination_lastPage' src='"+defaults.lastArrow+"'>");
        htmlBuffer.push("</span>");
        htmlBuffer.push("</div>");
        return htmlBuffer.join("").toString();
      }
      
      if ($(totalPagesId).length == 0) {
        $(this).after(createPaginationElements());
      }
      else {
        $('#tablePagination_currPage').val(currPageNumber);
      }
      resetPerPageValues();
      hideOtherPages(currPageNumber);
      
      $(firstPageId).bind('click', function (e) {
        resetCurrentPage(1)
      });
      
      $(prevPageId).bind('click', function (e) {
        resetCurrentPage(currPageNumber - 1)
      });
      
      $(nextPageId).bind('click', function (e) {
        resetCurrentPage(currPageNumber + 1)
      });
      
      $(lastPageId).bind('click', function (e) {
        resetCurrentPage(totalPages)
      });
      
      $(currPageId).bind('change', function (e) {
        resetCurrentPage(this.value)
      });
      
      $(rowsPerPageId).bind('change', function (e) {
        defaults.rowsPerPage = parseInt(this.value, 10);
        totalPages = resetTotalPages();
        resetCurrentPage(1)
      });
      
		})
	};		
})(jQuery);</span></span>

刷新頁面再看下效果就變成中文的了：

五、TableDnD拖拽表格行

TableDnD是一款表格行拖動插件。在頁面中使用鼠標可以隨意拖動顯示錶格行的位置。這個插件應該用的機會很少,我曾經的開發是沒用到過,或許特定的環境下需要吧。

代碼演示樣例：

<span style="font-family:SimSun;font-size:12px;"><span style="font-family:SimSun;font-size:12px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TableDnD</title>
<link href="images/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="images/table.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="jquery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="plugins/tablednd.js"></script>
<script type="text/javascript">
$(function(){
	var table = document.getElementById('grid');
	var tableDnD = new TableDnD();
	tableDnD.init(table);
})
</script>
<style type="text/css">

</style>
</head>
<body>
<h3>TableDnD拖拽表格行</h3>
<table id="grid">
    <thead>
        <tr>
            <th nowrap="nowrap">排名</th>
            <th nowrap="nowrap">校名</th>
            <th nowrap="nowrap">總得分</th>
            <th nowrap="nowrap">人才培養總得分</th>
            <th nowrap="nowrap">研究生培養得分</th>
            <th nowrap="nowrap">本科生培養得分</th>
            <th nowrap="nowrap">科學研究總得分</th>
            <th nowrap="nowrap">天然科學研究得分</th>
            <th nowrap="nowrap">社會科學研究得分</th>
            <th nowrap="nowrap">所屬省份</th>
            <th nowrap="nowrap">分省排名</th>
            <th nowrap="nowrap">學校類型</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>清華大學 </td>
            <td>296.77</td>
            <td>128.92</td>
            <td>93.83</td>
            <td>35.09</td>
            <td>167.85</td>
            <td>148.47</td>
            <td>19.38</td>
            <td width="16">京 </td>
            <td width="12">1 </td>
            <td>理工 </td>
        </tr>
        <tr>
            <td>2</td>
            <td>北京大學 </td>
            <td>222.02</td>
            <td>102.11</td>
            <td>66.08</td>
            <td>36.03</td>
            <td>119.91</td>
            <td>86.78</td>
            <td>33.13</td>
            <td>京 </td>
            <td>2 </td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>3</td>
            <td>浙江大學 </td>
            <td>205.65</td>
            <td>94.67</td>
            <td>60.32</td>
            <td>34.35</td>
            <td>110.97</td>
            <td>92.32</td>
            <td>18.66</td>
            <td>浙 </td>
            <td>1</td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>4</td>
            <td>上海交大</td>
            <td>150.98</td>
            <td>67.08</td>
            <td>47.13</td>
            <td>19.95</td>
            <td>83.89</td>
            <td>77.49</td>
            <td>6.41</td>
            <td>滬 </td>
            <td>1</td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>5</td>
            <td>南京大學</td>
            <td>136.49</td>
            <td>62.84</td>
            <td>40.21</td>
            <td>22.63</td>
            <td>73.65</td>
            <td>53.87</td>
            <td>19.78</td>
            <td>蘇</td>
            <td>1</td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>6</td>
            <td>復旦大學 </td>
            <td>136.36</td>
            <td>63.57</td>
            <td>40.26</td>
            <td>23.31</td>
            <td>72.78</td>
            <td>51.47</td>
            <td>21.31</td>
            <td>滬</td>
            <td>2</td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>7</td>
            <td>華中科大</td>
            <td>110.08</td>
            <td>54.76</td>
            <td>30.26</td>
            <td>24.50</td>
            <td>55.32</td>
            <td>47.45</td>
            <td>7.87</td>
            <td>鄂 </td>
            <td>1</td>
            <td>理工 </td>
        </tr>
        <tr>
            <td>8</td>
            <td>武漢大學 </td>
            <td>103.82</td>
            <td>50.21</td>
            <td>29.37</td>
            <td>20.84</td>
            <td>53.61</td>
            <td>36.17</td>
            <td>17.44</td>
            <td>鄂 </td>
            <td>2</td>
            <td>綜合</td>
        </tr>
        <tr>
            <td>9</td>
            <td>吉林大學 </td>
            <td>96.44</td>
            <td>48.61</td>
            <td>25.74</td>
            <td>22.87</td>
            <td>47.83</td>
            <td>38.13</td>
            <td>9.70</td>
            <td>吉 </td>
            <td>1</td>
            <td>綜合</td>
        </tr>
        <tr>
            <td>10</td>
            <td>西安交大</td>
            <td>92.82</td>
            <td>47.22</td>
            <td>24.54</td>
            <td>22.68</td>
            <td>45.60</td>
            <td>35.47</td>
            <td>10.13</td>
            <td>陝</td>
            <td>1</td>
            <td>綜合</td>
        </tr>
    </tbody>
</table>
</body>
</html></span></span>

六、uiTableEdit表格編輯

uiTableEdit是一款很是有用的表格數據編輯插件,使用方法很是easy,直接發代碼：

<span style="font-family:SimSun;font-size:12px;"><span style="font-family:SimSun;font-size:12px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>uiTableEdit</title>
<link href="images/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="images/table.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="jquery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="plugins/jquery.uitableedit.js"></script>
<script type="text/javascript">
$(function(){
	var t = $('table')
	$.uiTableEdit( t )
})
</script>
<style type="text/css">

</style>
</head>
<body>

<h3>uiTableEdit表格編輯</h3>
<table id="grid">
    <thead>
        <tr>
            <th nowrap="nowrap">排名</th>
            <th nowrap="nowrap">校名</th>
            <th nowrap="nowrap">總得分</th>
            <th nowrap="nowrap">人才培養總得分</th>
            <th nowrap="nowrap">研究生培養得分</th>
            <th nowrap="nowrap">本科生培養得分</th>
            <th nowrap="nowrap">科學研究總得分</th>
            <th nowrap="nowrap">天然科學研究得分</th>
            <th nowrap="nowrap">社會科學研究得分</th>
            <th nowrap="nowrap">所屬省份</th>
            <th nowrap="nowrap">分省排名</th>
            <th nowrap="nowrap">學校類型</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>清華大學 </td>
            <td>296.77</td>
            <td>128.92</td>
            <td>93.83</td>
            <td>35.09</td>
            <td>167.85</td>
            <td>148.47</td>
            <td>19.38</td>
            <td width="16">京 </td>
            <td width="12">1 </td>
            <td>理工 </td>
        </tr>
        <tr>
            <td>2</td>
            <td>北京大學 </td>
            <td>222.02</td>
            <td>102.11</td>
            <td>66.08</td>
            <td>36.03</td>
            <td>119.91</td>
            <td>86.78</td>
            <td>33.13</td>
            <td>京 </td>
            <td>2 </td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>3</td>
            <td>浙江大學 </td>
            <td>205.65</td>
            <td>94.67</td>
            <td>60.32</td>
            <td>34.35</td>
            <td>110.97</td>
            <td>92.32</td>
            <td>18.66</td>
            <td>浙 </td>
            <td>1</td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>4</td>
            <td>上海交大</td>
            <td>150.98</td>
            <td>67.08</td>
            <td>47.13</td>
            <td>19.95</td>
            <td>83.89</td>
            <td>77.49</td>
            <td>6.41</td>
            <td>滬 </td>
            <td>1</td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>5</td>
            <td>南京大學</td>
            <td>136.49</td>
            <td>62.84</td>
            <td>40.21</td>
            <td>22.63</td>
            <td>73.65</td>
            <td>53.87</td>
            <td>19.78</td>
            <td>蘇</td>
            <td>1</td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>6</td>
            <td>復旦大學 </td>
            <td>136.36</td>
            <td>63.57</td>
            <td>40.26</td>
            <td>23.31</td>
            <td>72.78</td>
            <td>51.47</td>
            <td>21.31</td>
            <td>滬</td>
            <td>2</td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>7</td>
            <td>華中科大</td>
            <td>110.08</td>
            <td>54.76</td>
            <td>30.26</td>
            <td>24.50</td>
            <td>55.32</td>
            <td>47.45</td>
            <td>7.87</td>
            <td>鄂 </td>
            <td>1</td>
            <td>理工 </td>
        </tr>
        <tr>
            <td>8</td>
            <td>武漢大學 </td>
            <td>103.82</td>
            <td>50.21</td>
            <td>29.37</td>
            <td>20.84</td>
            <td>53.61</td>
            <td>36.17</td>
            <td>17.44</td>
            <td>鄂 </td>
            <td>2</td>
            <td>綜合</td>
        </tr>
        <tr>
            <td>9</td>
            <td>吉林大學 </td>
            <td>96.44</td>
            <td>48.61</td>
            <td>25.74</td>
            <td>22.87</td>
            <td>47.83</td>
            <td>38.13</td>
            <td>9.70</td>
            <td>吉 </td>
            <td>1</td>
            <td>綜合</td>
        </tr>
        <tr>
            <td>10</td>
            <td>西安交大</td>
            <td>92.82</td>
            <td>47.22</td>
            <td>24.54</td>
            <td>22.68</td>
            <td>45.60</td>
            <td>35.47</td>
            <td>10.13</td>
            <td>陝</td>
            <td>1</td>
            <td>綜合</td>
        </tr>
    </tbody>
</table>
</body>
</html></span></span>

效果圖：

七、DataTables表格組件

DataTables是一款複雜的數據表格操做插件。DataTables提供了強大的jQuery表格操做特性,如本身主動篩選、Ajax預讀取數據、分頁、列排序、高亮排序列、拓展插件支持等。

看下樣例：

<span style="font-family:SimSun;font-size:12px;"><span style="font-family:SimSun;font-size:12px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DataTables</title>
<link href="images/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="images/table.css" rel="stylesheet" type="text/css" media="all" />
<link href="images/demo_table.css" rel="stylesheet" type="text/css" media="all" />
<link href="images/demo_page.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="jquery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="plugins/jquery.dataTables.js"></script>
<script type="text/javascript">
$(function(){
	$('#grid').dataTable();
})
</script>
<style type="text/css">
table#grid {
    width:100%;  
}
</style>
</head>
<body>

<h3>DataTables表格組件</h3>
<table id="grid">
    <thead>
        <tr>
            <th nowrap="nowrap">排名</th>
            <th nowrap="nowrap">校名</th>
            <th nowrap="nowrap">總得分</th>
            <th nowrap="nowrap">人才培養總得分</th>
            <th nowrap="nowrap">研究生培養得分</th>
            <th nowrap="nowrap">本科生培養得分</th>
            <th nowrap="nowrap">科學研究總得分</th>
            <th nowrap="nowrap">天然科學研究得分</th>
            <th nowrap="nowrap">社會科學研究得分</th>
            <th nowrap="nowrap">所屬省份</th>
            <th nowrap="nowrap">分省排名</th>
            <th nowrap="nowrap">學校類型</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>清華大學 </td>
            <td>296.77</td>
            <td>128.92</td>
            <td>93.83</td>
            <td>35.09</td>
            <td>167.85</td>
            <td>148.47</td>
            <td>19.38</td>
            <td width="16">京 </td>
            <td width="12">1 </td>
            <td>理工 </td>
        </tr>
        <tr>
            <td>2</td>
            <td>北京大學 </td>
            <td>222.02</td>
            <td>102.11</td>
            <td>66.08</td>
            <td>36.03</td>
            <td>119.91</td>
            <td>86.78</td>
            <td>33.13</td>
            <td>京 </td>
            <td>2 </td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>3</td>
            <td>浙江大學 </td>
            <td>205.65</td>
            <td>94.67</td>
            <td>60.32</td>
            <td>34.35</td>
            <td>110.97</td>
            <td>92.32</td>
            <td>18.66</td>
            <td>浙 </td>
            <td>1</td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>4</td>
            <td>上海交大</td>
            <td>150.98</td>
            <td>67.08</td>
            <td>47.13</td>
            <td>19.95</td>
            <td>83.89</td>
            <td>77.49</td>
            <td>6.41</td>
            <td>滬 </td>
            <td>1</td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>5</td>
            <td>南京大學</td>
            <td>136.49</td>
            <td>62.84</td>
            <td>40.21</td>
            <td>22.63</td>
            <td>73.65</td>
            <td>53.87</td>
            <td>19.78</td>
            <td>蘇</td>
            <td>1</td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>6</td>
            <td>復旦大學 </td>
            <td>136.36</td>
            <td>63.57</td>
            <td>40.26</td>
            <td>23.31</td>
            <td>72.78</td>
            <td>51.47</td>
            <td>21.31</td>
            <td>滬</td>
            <td>2</td>
            <td>綜合 </td>
        </tr>
        <tr>
            <td>7</td>
            <td>華中科大</td>
            <td>110.08</td>
            <td>54.76</td>
            <td>30.26</td>
            <td>24.50</td>
            <td>55.32</td>
            <td>47.45</td>
            <td>7.87</td>
            <td>鄂 </td>
            <td>1</td>
            <td>理工 </td>
        </tr>
        <tr>
            <td>8</td>
            <td>武漢大學 </td>
            <td>103.82</td>
            <td>50.21</td>
            <td>29.37</td>
            <td>20.84</td>
            <td>53.61</td>
            <td>36.17</td>
            <td>17.44</td>
            <td>鄂 </td>
            <td>2</td>
            <td>綜合</td>
        </tr>
        <tr>
            <td>9</td>
            <td>吉林大學 </td>
            <td>96.44</td>
            <td>48.61</td>
            <td>25.74</td>
            <td>22.87</td>
            <td>47.83</td>
            <td>38.13</td>
            <td>9.70</td>
            <td>吉 </td>
            <td>1</td>
            <td>綜合</td>
        </tr>
        <tr>
            <td>10</td>
            <td>西安交大</td>
            <td>92.82</td>
            <td>47.22</td>
            <td>24.54</td>
            <td>22.68</td>
            <td>45.60</td>
            <td>35.47</td>
            <td>10.13</td>
            <td>陝</td>
            <td>1</td>
            <td>綜合</td>
        </tr>
    </tbody>
</table>
</body>
</html></span></span>

效果圖：

在上述演示樣例中可以對錶格進行分頁、排序、過濾等操做。經過查看頁面結構咱們可以看到在table表格外面包裹了5個div標籤,如圖所看到的：

div部分的具體代碼例如如下：

<span style="font-family:SimSun;font-size:12px;"><span style="font-family:SimSun;font-size:12px;"><div id="grid_length" class="dataTables_length">Show
	<select size="1" name="grid_length">
		<option value="10">10</option>
		<option value="25">25</option>
		<option value="50">50</option>
		<option value="100">100</option>
	</select> entries
</div>

<div id="grid_filter" class="dataTables_filter">
	Search: <input type="text">
</div>

<table id="grid">
	<!--省略表格結構和數據-->
</table>
<div id="grid_info" class="dataTables_info">
	Showing 1 to 10 of 10 entries
</div>

<div id="grid_paginate" class="dataTables_paginate paging_two_button">
	<div id="grid_previous" class="paginate_disabled_previous" title="Previous"></div>
	<div id="grid_next" class="paginate_disabled_next" title="Next"></div>
</div></span></span>

這些div都是動態加入的。