使用JQUERY对表格进行分页
2010-02-03 16:32
399 查看
如果你的数据量很少，可以考虑一下这个分页方案，纯客户端分页，用JQ完成，如果数据量不大，完全可以使用这个，废话少说，上代码
<!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=gb2312" />
<title>JQ</title>
<style>
*{ text-decoration:none;}
tbody td{ height:22px; width:600px;}
.show{ display:block;}
.hide{ display:none;}
.currentpage{ border:solid #FF0000 1px;}
tfoot{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px;}
tfoot span{ display:block; float:left; margin:3px; padding:3px;}
tfoot span A{ display:block; border:solid #CCCCCC 1px; margin:0 2px; float:left; padding:2px 4px;font-weight:800; color:#000000;}
tfoot span A:hover{ border:solid #f93 1px; color:#FF0000; background: #eee;}
</style>
<script language="javascript" src="jquery.js"></script>
</head>
<body>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
<thead>
<tr>
<td height="18" align="center" bgcolor="#FFFFFF">分页测试</td>
</tr>
</thead>
<tbody id="pagelist">
<tr class="show">
<td bgcolor="#FFFFFF">这是行1</td>
</tr>
<tr class="show">
<td bgcolor="#FFFFFF">这是行2</td>
</tr>
<tr class="show">
<td bgcolor="#FFFFFF">这是行3</td>
</tr>
<tr class="show">
<td bgcolor="#FFFFFF">这是行4</td>
</tr >
<tr class="show">
<td bgcolor="#FFFFFF">这是行5</td>
</tr>
<tr class="show">
<td bgcolor="#FFFFFF">这是行6</td>
</tr>
<tr class="show">
<td bgcolor="#FFFFFF">这是行7</td>
</tr>
<tr class="show">
<td bgcolor="#FFFFFF">这是行8</td>
</tr>
<tr class="show">
<td bgcolor="#FFFFFF">这是行9</td>
</tr>
<tr class="show">
<td bgcolor="#FFFFFF">这是行10</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行11</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行12</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行13</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行14</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行15</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行16</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行17</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行18</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行19</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行20</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行21</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行22</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行23</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行24</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行25</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行26</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行27</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行28</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行29</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行30</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行31</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行32</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行33</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行34</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行35</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行36</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行37</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行38</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行39</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行40</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行41</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行42</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行43</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行44</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行45</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行46</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行47</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行48</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行49</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行50</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行51</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行52</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行53</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行54</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行55</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行56</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行57</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行58</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行59</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行60</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行61</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行62</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行63</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行64</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行65</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行66</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行67</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行68</td>
</tr >
<tr class="hide">
<td bgcolor="#FFFFFF">这是行69</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行70</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行71</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行72</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行73</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行74</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行75</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行76</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行77</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行78</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行79</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行80</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行81</td>
</tr >
<tr class="hide">
<td bgcolor="#FFFFFF">这是行82</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行83</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行84</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行85</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行86</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行87</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行88</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行89</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行90</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行91</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行92</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行93</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行94</td>
</tr >
<tr class="hide">
<td bgcolor="#FFFFFF">这是行95</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行96</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行97</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行98</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行99</td>
</tr >
<tr class="hide">
<td bgcolor="#FFFFFF">这是行100</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行101</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行102</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行103</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行104</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行105</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行106</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行107</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行108</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行109</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行110</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行111</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行112</td>
</tr >
<tr class="hide">
<td bgcolor="#FFFFFF">这是行113</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行114</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行115</td>
</tr>
</tbody>
<tfoot>
<tr>
<td bgcolor="#FFFFFF"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="47" align="center" ><span class="totalrows"></span><span class="curentpage"></span><span class="firstpage"></span><span class="pages"></span><span class="last"></span></td>
</tr>
</table></td>
</tr>
</tfoot>
</table>
</body>
</html>
<script language="javascript">
var rows=$("#pagelist td").size();//获取总行数
var page=1;//当前页
var pagesize=10;//分页尺寸
var totalpage=Math.ceil(rows/pagesize);//总页数
var from=1;//设定起始页码
var pages=8;//设定显示的页码数量
var offset=3;//设定偏移量
$().ready(function(){
var str="";
end=totalpage>pages?pages:totalpage;
for(i=1;i<=end;i++)
{
str+="<a href='javascript:void(0)' onclick=/"trunpage("+i+")/">"+i+"</a>"
}
$("span.pages").html(str);//写入分页链接
$("span.totalrows").html("一共有条"+rows+"记录");
$("span.curentpage").html(page+"/"+totalpage);
$("span.pages a").eq(page-1).addClass("currentpage");//标记当前页
$("span.last").html(totalpage>pages?"<a href='javascript:void(0)' onclick=/"trunpage("+totalpage+")/">尾页</a>":"")
});
function trunpage(page)
{
//判断是否显示首页
$("span.firstpage").html(page>1?"<a href='javascript:void(0)' onclick=/"trunpage(1)/">首页</a>":"")
var start=(page-1)*pagesize;//起始行数
var end=start+pagesize;//结束行数
$("span.curentpage").html(page+"/"+totalpage);//显示当前第几页
//显示指定页码的记录
$("#pagelist td").each(function(i){$(this).parent().attr("class",i>=start&&i<end?"show":"hide");})
if(page==1||page<=offset)
{
from=1;
to=pages;
}
else
{
if(page+offset>=totalpage)
{
to=totalpage
from=page-offset-1
}
else
{
from=page-offset;
to=page+offset+1;
}
}
var str="";
for(i=from;i<=to;i++)
{
if(page==i)
{
str+="<a href='javascript:void(0)' onclick=/"trunpage("+i+")/" class='currentpage'>"+i+"</a>"
}
else
{
str+="<a href='javascript:void(0)' onclick=/"trunpage("+i+")/">"+i+"</a>"
}
}
$("span.pages").html(str);//写入分页链接
}
</script>
<!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=gb2312" />
<title>JQ</title>
<style>
*{ text-decoration:none;}
tbody td{ height:22px; width:600px;}
.show{ display:block;}
.hide{ display:none;}
.currentpage{ border:solid #FF0000 1px;}
tfoot{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px;}
tfoot span{ display:block; float:left; margin:3px; padding:3px;}
tfoot span A{ display:block; border:solid #CCCCCC 1px; margin:0 2px; float:left; padding:2px 4px;font-weight:800; color:#000000;}
tfoot span A:hover{ border:solid #f93 1px; color:#FF0000; background: #eee;}
</style>
<script language="javascript" src="jquery.js"></script>
</head>
<body>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
<thead>
<tr>
<td height="18" align="center" bgcolor="#FFFFFF">分页测试</td>
</tr>
</thead>
<tbody id="pagelist">
<tr class="show">
<td bgcolor="#FFFFFF">这是行1</td>
</tr>
<tr class="show">
<td bgcolor="#FFFFFF">这是行2</td>
</tr>
<tr class="show">
<td bgcolor="#FFFFFF">这是行3</td>
</tr>
<tr class="show">
<td bgcolor="#FFFFFF">这是行4</td>
</tr >
<tr class="show">
<td bgcolor="#FFFFFF">这是行5</td>
</tr>
<tr class="show">
<td bgcolor="#FFFFFF">这是行6</td>
</tr>
<tr class="show">
<td bgcolor="#FFFFFF">这是行7</td>
</tr>
<tr class="show">
<td bgcolor="#FFFFFF">这是行8</td>
</tr>
<tr class="show">
<td bgcolor="#FFFFFF">这是行9</td>
</tr>
<tr class="show">
<td bgcolor="#FFFFFF">这是行10</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行11</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行12</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行13</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行14</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行15</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行16</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行17</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行18</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行19</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行20</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行21</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行22</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行23</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行24</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行25</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行26</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行27</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行28</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行29</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行30</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行31</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行32</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行33</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行34</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行35</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行36</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行37</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行38</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行39</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行40</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行41</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行42</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行43</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行44</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行45</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行46</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行47</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行48</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行49</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行50</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行51</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行52</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行53</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行54</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行55</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行56</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行57</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行58</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行59</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行60</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行61</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行62</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行63</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行64</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行65</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行66</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行67</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行68</td>
</tr >
<tr class="hide">
<td bgcolor="#FFFFFF">这是行69</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行70</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行71</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行72</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行73</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行74</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行75</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行76</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行77</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行78</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行79</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行80</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行81</td>
</tr >
<tr class="hide">
<td bgcolor="#FFFFFF">这是行82</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行83</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行84</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行85</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行86</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行87</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行88</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行89</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行90</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行91</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行92</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行93</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行94</td>
</tr >
<tr class="hide">
<td bgcolor="#FFFFFF">这是行95</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行96</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行97</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行98</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行99</td>
</tr >
<tr class="hide">
<td bgcolor="#FFFFFF">这是行100</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行101</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行102</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行103</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行104</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行105</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行106</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行107</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行108</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行109</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行110</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行111</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行112</td>
</tr >
<tr class="hide">
<td bgcolor="#FFFFFF">这是行113</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行114</td>
</tr>
<tr class="hide">
<td bgcolor="#FFFFFF">这是行115</td>
</tr>
</tbody>
<tfoot>
<tr>
<td bgcolor="#FFFFFF"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="47" align="center" ><span class="totalrows"></span><span class="curentpage"></span><span class="firstpage"></span><span class="pages"></span><span class="last"></span></td>
</tr>
</table></td>
</tr>
</tfoot>
</table>
</body>
</html>
<script language="javascript">
var rows=$("#pagelist td").size();//获取总行数
var page=1;//当前页
var pagesize=10;//分页尺寸
var totalpage=Math.ceil(rows/pagesize);//总页数
var from=1;//设定起始页码
var pages=8;//设定显示的页码数量
var offset=3;//设定偏移量
$().ready(function(){
var str="";
end=totalpage>pages?pages:totalpage;
for(i=1;i<=end;i++)
{
str+="<a href='javascript:void(0)' onclick=/"trunpage("+i+")/">"+i+"</a>"
}
$("span.pages").html(str);//写入分页链接
$("span.totalrows").html("一共有条"+rows+"记录");
$("span.curentpage").html(page+"/"+totalpage);
$("span.pages a").eq(page-1).addClass("currentpage");//标记当前页
$("span.last").html(totalpage>pages?"<a href='javascript:void(0)' onclick=/"trunpage("+totalpage+")/">尾页</a>":"")
});
function trunpage(page)
{
//判断是否显示首页
$("span.firstpage").html(page>1?"<a href='javascript:void(0)' onclick=/"trunpage(1)/">首页</a>":"")
var start=(page-1)*pagesize;//起始行数
var end=start+pagesize;//结束行数
$("span.curentpage").html(page+"/"+totalpage);//显示当前第几页
//显示指定页码的记录
$("#pagelist td").each(function(i){$(this).parent().attr("class",i>=start&&i<end?"show":"hide");})
if(page==1||page<=offset)
{
from=1;
to=pages;
}
else
{
if(page+offset>=totalpage)
{
to=totalpage
from=page-offset-1
}
else
{
from=page-offset;
to=page+offset+1;
}
}
var str="";
for(i=from;i<=to;i++)
{
if(page==i)
{
str+="<a href='javascript:void(0)' onclick=/"trunpage("+i+")/" class='currentpage'>"+i+"</a>"
}
else
{
str+="<a href='javascript:void(0)' onclick=/"trunpage("+i+")/">"+i+"</a>"
}
}
$("span.pages").html(str);//写入分页链接
}
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 对html或jsp文章列表页面进行js分页，结合使用apache的url Rewrite和jquery
- 使用jquery的tablesorter插件进行表格排序
- 使用存储过程，分页用户控件，jQuery进行Ajax分页!
- 使用vue和datatables进行表格的服务器端分页实例代码
- 使用jQuery和PHP将Fckeditor发布的内容进行无刷新分页
- ASP.net MVC使用Jquery-pager和Newtonsoft.Json进行分页
- 使用jquery的tablesorter插件进行表格排序
- 使用Jquery实现表格动态分页
- jquery表格datagrid单元格显示图片及分页使用
- 使用jquery的tablesorter插件进行表格排序
- 使用jQuery设置表格分页
- 使用jQuery.pager.js进行无刷新分页(当然想带刷新的话更简单)
- ASP.net MVC使用Jquery-pager和Newtonsoft.Json进行分页
- 使用jQuery和PHP将Fckeditor(ckeditor)发布的内容进行无刷新分页
- 使用jQuery和PHP将Fckeditor(ckeditor)发布的内容进行无刷新分页
- 使用vue和datatables进行表格的服务器端分页
- jQuery 表格排序插件 Tablesorter 使用
- 使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享
- Zend Framework使用Zend_Paginator进行数据库交互和分页
- 基于Bootstrap使用jQuery实现简单可编辑表格