jQuery整理笔记九----功能性表格开发

最新推荐文章于 2019-11-19 21:14:08 发布
最新推荐文章于 2019-11-19 21:14:08 发布
阅读量2.8k 收藏 2
点赞数 1
分类专栏： jQuery jQuery 文章标签： uiTableFilter tablesorter heatColor uiTableEdit DataTables
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caohaicheng/article/details/27536965
版权
jQuery 同时被 2 个专栏收录
21 篇文章 11 订阅
订阅专栏
jQuery
20 篇文章 1 订阅
订阅专栏

示例中用到的一些图片、插件、样式文件等下载地址：点我进入下载

过去在开发过程中关于table方面的jquery应用仅仅是局限于使用jquery操作table增加一行、删除一列等等操作。今天整理的跟过去用的不一样。

1、uiTableFilter

uiTableFilter是一款表格数据行过滤插件，使用很简单,具体用法如下：

$.uiTableFilter(table,phrase)  该函数包含两个参数,其中第一个参数为jQuery对象,即为jQuery方法匹配的表格,或者也可以是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>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">过滤关键字: 
		<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>
效果图：



联系实际：

（1）、这个插件只针对table内的数据进行过滤,我们在一般的web项目开发中如果数据量的习惯用分页,分页一般是后台sql语句或者其他方法实现的,总之,传到web页面的数据一

般是10条或者20条,这个时候这个插件就只能针对本页的数据进行排序了,如果需求只针对当前页进行过滤,那才可以使用。

（2）、如果页面数据量不大（几十条或者几百条）,那我们没有必要分页,页面加一个滚动条把所有数据都放在表格里就行了.这时候这个过滤就可以应用到全部的数据了。

（3）、以前做的项目中对表格进行过滤的时候习惯于将各个列的过滤条件分开,例如名称是一个过滤条件,血量值又是一个过滤条件。现在这个插件是针对所有的列做统一的过

滤,我感觉在特定的情景下用起来也是不错的。  

（4）、这个插件的过滤由jquery插件完成,免去了对后台的请求,也免去了某些数据库的操作。

2、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()函数内传递值,直接初始化排序列和方法,例如下面代码将按照数据表格的第1、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             StringshiftKey选择多列排序的时候按住哪个键
textExtractionString或function                 simple定义使用哪种方法来提取一个单元格的数据表进行排序。取值包括simple、complex和自定义函数。
headersObject
定义每一列的排序控制指令
sortForceArray
用于添加额外的强制排序,将被追加到用户的动态选择。例如,可用于按字母顺序排序后,其他用户选择的排序,在处理如因同一日期或货币值的行的结果。它可以帮助好像是随机次要排序数据。
widthFixedBooleanfalse指示是否tablesorter应适用于固定宽度的表列。
cancelSelectionBooleantrue指示表头的文本禁止选择,使头部看起来像个按钮的样子
cssHeaderStringheader定义表头样式表
cssAscStringheaderSortUp                         定义按照升序排序时表头的样式名
cssDescStringheaderSortDesc定义按照降序排序时表头的样式名

debugBooleanfalse是否应显示调试运行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键选择多列进行排序,用在项目中还是有助于提高产品的用户体验的。

3、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>
效果图：

4、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：定义首页按钮图片的URL，默认值为./images/first.gif

prevArrow:上一页按钮图片的URL，默认值为./images/prev.gif

lastArrow:尾页按钮图片的URL,默认值为./images/last.gif

nextArrow:下一页按钮图片的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>
刷新页面再看下效果就变成中文的了：

5、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>
6、uiTableEdit表格编辑

uiTableEdit是一款很实用的表格数据编辑插件,用法很简单,直接发代码：

<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>
效果图：

7、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都是动态添加的。



hai_cheng001
关注
专栏目录
Tabulator是一款非常实用的基于jQueryUI的表格插件
08-10
Tabulator是一款非常实用的基于jQuery UI的表格插件。Tabulator表格插件可以快速的使用JSON数据来创建表格，它没有任何外部依赖的CSS样式和图片，使用非常简单。
功能需求梳理模板
09-19
这是一份功能需求模板。做开发时候经常要写功能需求分析
jQuery之功能性表格开发
逍遥飞鹤的专栏
07-24 444
示例中用到的一些图片、插件、样式文件等下载地址：点我进入下载 过去在开发过程中关于table方面的jquery应用仅仅是局限于使用jquery操作table增加一行、删除一列等等操作。今天整理的跟过去用的不一样。 1、uiTableFilter uiTableFilter是一款表格数据行过滤插件，使用很简单,具体用法如下： $.uiTableFilter(tab
通过拖动表格行进行行排序
weixin_34275734的博客
08-12 228
参考原文链接： http://stackoverflow.com/questions/2072848/reorder-html-table-rows-using-drag-and-drop 在最近的项目中，我们有这样一个需求，要手动拖动html table中的行(tr)进行排序， 就是我可以将第一行拖到第三行，第四行拖到六行这样子。 一开始我想起了jquery ui中的sortable，发...
jQuery整理笔记9----函数形式发展
aofan9566的博客
09-10 124
在一些照片中使用演示样本、插入、样式文件下载：点我进入下载 过去在开发过程中关于table方面的jquery应用不过局限于使用jquery操作table添加一行、删除一列等等操作。今天整理的跟过去用的不一样。 1、uiTableFilter uiTableFilter是一款表格数据行过滤插件，使用非常easy,详细使用方法例如以下： $.uiTableFilt...
bootstrap响应式网页作业age-processing开发笔记
最新发布
06-25
在进行网页开发时，通常会结合JavaScript和jQuery来实现动态效果和交互功能。Bootstrap的JavaScript插件，如Dropdowns、Modal对话框和Carousel轮播图，可以进一步提升网页的交互性。在“age-processing”作业中，...
谷歌师兄的leetcode刷题笔记-reading-notes:读书笔记
06-30
谷歌师兄的leetcode刷题笔记札记 该文件将用于读取作业。 这个网站将包括我在不同级别阅读作业的笔记。 代码 102 - 软件开发简介 Code 201 - 软件开发基础 代码 301 - 中级软件开发 代码 401 - 高级软件开发 我在...
jqGrid学习笔记1 - - - - jqGrid英语PDF文档
07-27
此外，还有主题支持，如jQuery UI的主题，让表格看起来更加专业和美观。 关于源码分析，jqGrid的源码结构清晰，便于开发者进行二次开发或性能优化。了解其内部工作原理有助于解决遇到的特定问题，或者根据需求添加...
jQuery编程笔记
11-13
### jQuery编程笔记知识点详解 #### 一、jQuery概述 1. **简介** - **定义**: jQuery是一款轻量级的JavaScript库，旨在简化HTML文档的操作、事件处理、动画及Ajax交互。 - **特点**: - **轻量化**: 减少...
jQuery简单仿Excel表格功能插件.zip
09-22
"fonts"目录可能包含了一些特殊字体文件，用于实现特定的字符样式，如图标或特殊符号，以增强表格的功能性和美观性。 总结来说，这个"jQuery简单仿Excel表格功能插件"通过结合HTML、CSS和JavaScript（尤其是jQuery...
jquery-ui 的各种模板
09-05
jquery-ui 的各种模板，包括小按钮、文本框、下拉菜单、多级下拉菜单等等 jquery-ui 的各种模板，包括小按钮、文本框、下拉菜单、多级下拉菜单等等
使用jQuery UI 实现表格排序
weixin_30394251的博客
10-06 223
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>表格排序</title> <link rel="stylesheet" href="jquery-ui-1.12.0/jquery-ui.css"></head><...
jQuery学习总结四 --- 功能性表格的开发
逍遥飞鹤的专栏
07-24 431
示例中用到的一些图片、插件、样式文件等下载地址：点我进入下载 过去在开发过程中关于table方面的jquery应用仅仅是局限于使用jquery操作table增加一行、删除一列等等操作。今天整理的跟过去用的不一样。 1、uiTableFilter uiTableFilter是一款表格数据行过滤插件，使用很简单,具体用法如下： $.uiTableFilter(tab
用jQuery—ui对表格进行修改数据
lyx_lyq的博客
03-31 1268
table{             border: 1px solid gray;             text-align: center;             width: 1000px;             border-collapse: collapse;         }         table th, table td{             bo
JQuery UI Flexgrid 表格应用
JAVA小菜鸟的成长之路
01-05 5240
JQuery  UI  flexgrid 应用 本实例利用Jquery Ui Flexgrid插件来实现如下图的表格功能：   一、首先导入必要的JS文件和Css文件：   二、客户端实现：         Flexigrid                        $(document).ready(function () {
Jquery 应用系列：创建复杂表格
行成于思，形之于文
02-07 814
ss
Jquery LigerUI-表格的使用
swebin的专栏
11-15 885
Jquery LigerUI-表格的使用
vue怎么实现element表格里表头信息提示功能？
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
11-19 2572
需求 如图：在element表格操作一栏需要添加提示功能 实现效果 如图：鼠标浮上去弹出tips 解决方案 1、编写组件 在promptMessage.vue文件里面实现 <template> <!-- 处理element表格表头文字提示特别添加全局注册组件 --> <div class="promt-message-tooltip"> <e...
JqueryUI表格编辑-与后端交互问题
NBBLOGS的博客
08-26 985
datagrid表格实现编辑问题描述 datagrid 表格编辑时并没有修改然而却在数据库中保留了数据，并刷新前端 if(changes){ $.post(url,param,function(data){}); } 问题解决方案 分析：发现下面都不该调用后端然而却调用了，原因是没有编辑然而onAfterEdit(index, row, changes){}事件中changes不为空
jQuery实现表格排序功能示例代码
- jQuery通过封装DOM操作和提供跨浏览器兼容性，让Web开发人员能够更快速地编写JavaScript代码。 - jQuery遵循"写得少，做得多"的原则，通过简短的代码来实现复杂的功能。 - jQuery的语法设计让其易于学习和使用...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值