jQuery整理笔记九----功能性表格开发
版权声明：本文为博主原创文章。未经博主同意不得转载。 https://blog.csdn.net/hai_cheng001/article/details/27536965
演示样例中用到的一些图片、插件、样式文件等下载地址：点我进入下载
过去在开发过程中关于table方面的jquery应用仅仅是局限于使用jquery操作table添加一行、删除一列等等操作。今天整理的跟过去用的不一样。
1、uiTableFilter
uiTableFilter是一款表格数据行过滤插件，使用非常easy,具体使用方法例如以下：
$.uiTableFilter(table,phrase) 该函数包括两个參数,当中第一个參数为jQuery对象,即为jQuery方法匹配的表格,或者也能够是jQuery匹配到的多个表格数据行。第二个參数表示匹配的keyword,以字符串形式传递。另外,还可包括两个可选參数,分别设置限制列和隐藏元素。
代码演示样例：
<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>效果图：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FvaGFpY2hlbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FvaGFpY2hlbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
联系实际：
（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>效果图：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FvaGFpY2hlbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
单击校名称后效果图例如以下：
当然,我们也能够在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插件还包括多个參数，參数例如以下表所看到的：
| 參数 | 数据类型 | 默认值 | 说明 |
| 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键选择多列进行排序,用在项目中还是有助于提高产品的用户体验的。
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>效果图：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FvaGFpY2hlbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
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：定义首页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>刷新页面再看下效果就变成中文的了：
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是一款非常实用的表格数据编辑插件,使用方法非常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>效果图：
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都是动态加入的。
jQuery整理笔记九----功能性表格开发的更多相关文章
- jQuery整理笔记文件夹
jQuery整理笔记文件夹 jQuery整理笔记一----jQuery開始 jQuery整理笔记二----jQuery选择器整理 jQuery整理笔记三----jQuery过滤函数 jQuery整理笔 ...
- jQuery整理笔记七----几个经典表单应用
1.文本框获得(失去)焦点 当文本框获得输入焦点时,将该文本框高亮显示,算不得一个应用,仅仅是一个小技巧,能够提高用户体验. <!DOCTYPE html PUBLIC "-//W3C ...
- jQuery整理笔记9----函数形式发展
在一些照片中使用演示样本.插入.样式文件下载:点我进入下载 过去在开发过程中关于table方面的jquery应用不过局限于使用jquery操作table添加一行.删除一列等等操作.今天整理的跟过去用的 ...
- jQuery整理笔记2----jQuery选择整理
一个.基本的选择 1.ID选择器 JavaScript提供了原生方法实如今DOM中选择指定ID值得元素. 使用方法例如以下: var element=document.getElementById(& ...
- jQuery整理笔记八----jQuery的Ajax
Ajax,我一直读的是"阿贾克斯",据当时大学老师讲该读音出处是依据当年风靡欧洲的荷兰足球俱乐部阿贾克斯的名字来的,我认为说法挺靠谱的. jQuery封装了Ajax的交互过程,用户 ...
- jQuery整理笔记5----jQuery大事
一.大事 1.载入中DOM $(document).ready() 这个第一节里具体介绍了 2.事件绑定 jQuery定义了bind()方法作为统一的接口.用来为每个匹配元素绑定事件处理程序.其基本的 ...
- jquery 整理笔记（一）
this:表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性,方法 $(this),代表的上下文对象是一个jquery的上下文对象,可以调用jquery的方法和属性值. each ...
- 《MFC游戏开发》笔记九 游戏中的碰撞判定初步&怪物运动简单AI
本系列文章由七十一雾央编写,转载请注明出处. http://blog.csdn.net/u011371356/article/details/9374935 作者:七十一雾央 新浪微博:http:// ...
- jQuery整理您的笔记----jQuery开始
Jquery它是一种高速.简明的JavaScript相框,jQuery设计目标:Write Less,Do More(写更少的代码,做很多其他的事情). 一.Jquery框架优势: 1.轻量级 jQu ...
随机推荐
- 七牛云杜江华：让云 + AI 成为企业服务的标配
12 月 5-6 日,2018 创业邦 100 未来领袖峰会暨创业邦年会(以下简称「创业邦 100 未来领袖峰会」)在北京国家会议中心举行.12 月 5 日下午,七牛云执行副总裁杜江华在企业服务论坛上 ...
- POJ 1125 Stockbroker Grapevine【floyd】
很裸的floyd #include<cstdio> #include<string.h> #include<algorithm> #define maxn 201 ...
- 刷题总结——魔法森林（bzoj3669）
题目: Description 为了得到书法大家的真传,小E同学下定决心去拜访住在魔法森林中的隐士.魔法森林可以被看成一个包含个N节点M条边的无向图,节点标号为1..N,边标号为1..M.初始时小E同 ...
- 刷题总结——魔术球问题（ssoj最小路径覆盖+网络流）
题目: 题目描述 假设有 n 根柱子,现要按下述规则在这 n 根柱子中依次放入编号为 1,2 ,3,… 的球.(1)每次只能在某根柱子的最上面放球.(2)在同一根柱子中,任何 2 个相邻球的编号之和为 ...
- P1410 子序列 (动态规划)
题目描述 给定一个长度为N(N为偶数)的序列,问能否将其划分为两个长度为N/2的严格递增子序列. 输入输出格式 输入格式: 若干行,每行表示一组数据.对于每组数据,首先输入一个整数N,表示序列的长度. ...
- 【leetcode dp】629. K Inverse Pairs Array
https://leetcode.com/problems/k-inverse-pairs-array/description/ [题意] 给定n和k,求正好有k个逆序对的长度为n的序列有多少个,0& ...
- 【angularjs学习】简单的语法
<div ng-app="" ng-init="names=[{name:'Jani',country:'Norway'},{name:'Hege',country ...
- jenkins使用流程
jenkins使用流程 看下面那个连接的吧. http://www.cnblogs.com/zz0412/p/jenkins02.html 1.设置git库 2.点击add添加github用户名.密码 ...
- VS2015 “GENERATERESOURCE”任务意外失败 解决方法
昨天把项目解决方案Copy到另外的机器上执行,遭遇了一场"任务意外失败",网上搜索一下,顺利解决了,在此记录一下. Visual Studio.net 工程更换机器编译时遇到”Ge ...
- poj 3304 判断是否存在一条直线与所有线段相交
Segments Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 8579 Accepted: 2608 Descript ...