2010年01月10日   JavaScript, 头条, 码农之路   8,803 次浏览

今天本来是准备用STRUTS2实现表格分页的,但是突然间发现很麻烦,因为我所有的东西都已经做好了,就只剩下表格没有分页了,要再去改代码的话会很麻烦,就去网上找看有没有简单点的方法,最后决定了用JS实现分页,原因有两点:1、用JS去做不用去改程序的代码,只要加上JS代码就可以了;2、我所有的表格里面的数据都不是很多,不用担心处理速度和内存的问题。

在网上找了上些代码,都不是很好,不能够通用,自己修改了一下,能够通用了,以下是代码(直接复制就可以在网页中看到效果):

————————pagesplit.js——————————————–

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
// 纯js分页分页函数
// 参数:表对象,当前页码,每页行数,表头行数,表尾行数,分页对象
function pageSplit(obj, pno, psize, headNum, footNum,obj1) {
 var itable = document.getElementById(obj);
 var num = itable.rows.length;//表格行数
 var realNum = num - headNum - footNum;//实际数据行数
 var pageSize = psize;//每页显示行数
 
 if(realNum <= pageSize) {
  return;
 }
 
 var totalPage = parseInt((realNum+pageSize-1)/pageSize);//总页数
 var currentPage = pno;//当前页码
 var startRow = (currentPage - 1) * pageSize + 1;//开始显示的行
 var endRow = currentPage * pageSize + 1;//结束显示的行
 endRow = (endRow > num) ? num : endRow;
 
 //前headNum行始终显示
 for (i = 0; i < headNum; i++) {
  var irow = itable.rows[i];
  irow.style.display = "block";
 }
 for (var i = headNum; i < num - footNum; i++) {
  var irow = itable.rows[i];
  if (i >= startRow && i < endRow) {
   irow.style.display = "block";
  } else {
   irow.style.display = "none";
  }
 }
 //后footNum行始终显示
 for (i = num - footNum; i < footNum; i++) {
  var irow = itable.rows[i];
  irow.style.display = "block";
 }
 
 var tempStr = "共" + currentPage + "/" + totalPage + "页";
 if (currentPage > 1) {
  tempStr += "<a style='cursor:hand;' onClick=\"pageSplit('" + obj + "'," + (1) + "," + psize + "," + headNum + "," + footNum + ",'" + obj1 + "')\">首页</a>";
  tempStr += "<a style='cursor:hand;' onClick=\"pageSplit('" + obj + "'," + (currentPage - 1) + "," + psize + "," + headNum + "," + footNum + ",'" + obj1 + "')\">上一页</a>";
 }
 else {
  tempStr += "首页";
  tempStr += "上一页";
 }
 if (currentPage < totalPage) {
  tempStr += "<a style='cursor:hand;' onClick=\"pageSplit('" + obj + "'," + (currentPage + 1) + "," + psize + "," + headNum + "," + footNum + ",'" + obj1 + "')\">下一页</a>";
  tempStr += "<a style='cursor:hand;' onClick=\"pageSplit('" + obj + "'," + (totalPage) + "," + psize + "," + headNum + "," + footNum + ",'" + obj1 + "')\">尾页</a>";
 }
 else {
  tempStr += "下一页";
  tempStr += "尾页";
 }
 
 document.getElementById(obj1).innerHTML = tempStr;
}

————————pagesplit.js——————————————–

————————pagesplit.html——————————————–

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
 <head>
  <script type="text/javascript" src="pagesplit.js"></script>
  </head>
 
 <body onLoad="pageSplit('pTable',1,3,1,1,'pSpan');">
  <table id="pTable">
   <thead>
    <tr><td>姓名</td><td>姓别</td><td>年龄</td></tr>
   </thead>
   <tbody>
    <tr><td>name1</td><td>sex1</td><td>age1</td></tr>
    <tr><td>name2</td><td>sex1</td><td>age1</td></tr>
    <tr><td>name3</td><td>sex1</td><td>age1</td></tr>
    <tr><td>name4</td><td>sex1</td><td>age1</td></tr>
    <tr><td>name5</td><td>sex1</td><td>age1</td></tr>
    <tr><td>name6</td><td>sex1</td><td>age1</td></tr>
    <tr><td>name7</td><td>sex1</td><td>age1</td></tr>
    <tr><td>name8</td><td>sex1</td><td>age1</td></tr>
    <tr><td>name9</td><td>sex1</td><td>age1</td></tr>
    <tr><td>name10</td><td>sex1</td><td>age1</td></tr>
   </tbody>
   <tfoot>
    <tr><td colspan="3"><span id="pSpan"></span></td></tr>
   </tfoot>
  </table>
 </body>
 
</html>

————————pagesplit.html——————————————–

我已经自己调试能过了,希望能对大家有用。

赞 赏
申明:除非注明,本站文章均为原创,转载请以链接形式标明本文地址。 如有问题,请于一周内与本站联系,本站将在第一时间对相关内容进行处理。
本文地址: http://www.yyjjssnn.cn/articles/35.html
相关阅读: JS分页

>>> Hello World <<<

这篇内容是否帮助到你了呢?

如果你有任何疑问或有建议留给其他朋友,都可以给我留言。

:wink: :twisted: :surprised: :smile: :smile9: :smile8: :smile7: :smile6: :smile5: :smile56: :smile55: :smile54: :smile53: :smile52: :smile51: :smile50: :smile4: :smile49: :smile48: :smile47: :smile46: :smile45: :smile44: :smile43: :smile42: :smile41: :smile40: :smile3: :smile39: :smile38: :smile37: :smile36: :smile35: :smile34: :smile33: :smile32: :smile31: :smile30: :smile2: :smile29: :smile28: :smile27: :smile26: :smile25: :smile24: :smile23: :smile22: :smile21: :smile20: :smile1: :smile19: :smile18: :smile17: :smile16: :smile15: :smile14: :smile13: :smile12: :smile11: :smile10: :smile0: :sad: :rolleyes1: :redface: :razz: :question: :neutral: :mrgreen: :mad: :lol: :idea: :exclaim: :evil: :eek: :cry: :cool: :confused: :biggrin: :arrow:

友情链接: 程序员刘杨 刘杨
Copyright 2003~2018 保留所有权利 | 网站地图
备案号:湘ICP备14001005号-2

湘公网安备 43011102001322号