div+css+javascript循环分页表格_html/css_WEB-ITnose

是用js脚本写的分页代码，符合web标准。

  1
  2
  3
  4
  5
  6
  7 ? б  -   ????
  8
  9 * {    margin:0;    padding:0;    list-style:none; text-align:center;}
 10 .clear { clear:both; font:Verdana, Geneva, sans-serif 0px/0px;}
 11ul#pageContent { margin-left:1px; margin-top:1px; }
 12ul#pageContent li { float:left; height:23px; border:1px solid #cfdae8; margin-left:-1px; margin-top:-1px; white-space:nowrap;}
 13
 14
 15#pages{ color:#666; text-align:center; }
 16#pages span{ border:1px solid #ddd; line-height:1.2; margin:0 3px; padding:3px 4px; color:#ccc }
 17#pages span a{ text-decoration:none; color:#333333}
 18#pages span a:hover{}
 19#pages strong{ color:#FF0000; padding:0 3px; font-weight:bold}
 20
 21
 22
 23

 24

 25
• 科研处关于科研成果登记的通知1

 26     
• 关于清除炒股聊天等软件的通知2

 27     
• 科研处关于科研成果登记的通知3

 28     
• 关于清除炒股聊天等软件的通知4

 29     
• 科研处关于科研成果登记的通知5

 30     
• 关于清除炒股聊天等软件的通知6

 31     
• 科研处关于科研成果登记的通知7

 32     
• 关于清除炒股聊天等软件的通知8

 33     
• 科研处关于科研成果登记的通知9

 34     
• 关于清除炒股聊天等软件的通知10

 35      
• 科研处关于科研成果登记的通知11

 36     
• 关于清除炒股聊天等软件的通知12

 37     
• 科研处关于科研成果登记的通知13

 38     
• 关于清除炒股聊天等软件的通知14

 39     
• 科研处关于科研成果登记的通知15

 40     
• 关于清除炒股聊天等软件的通知16

 41     
• 科研处关于科研成果登记的通知17

 42     
• 关于清除炒股聊天等软件的通知18

 43     
• 科研处关于科研成果登记的通知19

 44     
• 关于清除炒股聊天等软件的通知20

 45     
• 科研处关于科研成果登记的通知21

 46     
• 关于清除炒股聊天等软件的通知22

 47     
• 科研处关于科研成果登记的通知23

 48     
• 关于清除炒股聊天等软件的通知24

 49     
• 科研处关于科研成果登记的通知25

 50     
• 关于清除炒股聊天等软件的通知26

 51     
• 科研处关于科研成果登记的通知27

 52     
• 关于清除炒股聊天等软件的通知28

 53     
• 科研处关于科研成果登记的通知29

 54     
• 关于清除炒股聊天等软件的通知30

 55     
• 科研处关于科研成果登记的通知31

 56     
• 关于清除炒股聊天等软件的通知32

 57     
• 科研处关于科研成果登记的通知33

 58     
• 关于清除炒股聊天等软件的通知34

 59     
• 科研处关于科研成果登记的通知35

 60     
• 关于清除炒股聊天等软件的通知36

 61     
• 科研处关于科研成果登记的通知37

 62     
• 关于清除炒股聊天等软件的通知38

 63     
• 科研处关于科研成果登记的通知39

 64     
• 关于清除炒股聊天等软件的通知40

 65

 66

 

 67

  首页 上一页 下一页 尾页 第页/共页   

 68<script> <br /> 69 var theUL = document.getElementById("pageContent"); <br /> 70 var totalPage = document.getElementById("spanTotalPage"); <br /> 71 var pageNum = document.getElementById("spanPageNum"); //获取当前页<span> <br /> 72 var spanPre = document.getElementById("spanPre"); //获取上一页<span> <br /> 73 var spanNext = document.getElementById("spanNext"); //获取下一页<span> <br /> 74 var spanFirst = document.getElementById("spanFirst"); //获取第一页<span> <br /> 75 var spanLast = document.getElementById("spanLast"); //获取最后一页<span> <br /> 76 var numberRowsInTable = theUL.getElementsByTagName("li").length; //记录总条数 <br /> 77 var pageSize = 8; //每页显示的记录条数 <br /> 78 var page = 1; //当前页，默认第一页 <br /> 79 <br /> 80 //下一页 <br /> 81 function next(){ <br /> 82 hideTable(); <br /> 83 currentRow = pageSize * page; <br /> 84 maxRow = currentRow + pageSize; <br /> 85 if ( maxRow > numberRowsInTable ) maxRow = numberRowsInTable; <br /> 86 for ( var i = currentRow; i< maxRow; i++ ){ <br /> 87theUL.getElementsByTagName("li")[i].style.display = ''; <br /> 88 } <br /> 89 page++; <br /> 90 if ( maxRow == numberRowsInTable ) { <br /> 91 nextText(); <br /> 92 lastText(); <br /> 93 } <br /> 94 showPage(); <br /> 95 preLink(); <br /> 96 firstLink(); <br /> 97 } <br /> 98 <br /> 99 //上一页 <br />100 function pre(){ <br />101 hideTable(); <br />102 page--; <br />103 currentRow = pageSize * page; <br />104 maxRow = currentRow - pageSize; <br />105 if ( currentRow > numberRowsInTable ) currentRow = numberRowsInTable; <br />106 for ( var i = maxRow; i< currentRow; i++ ){ <br />107theUL.getElementsByTagName("li")[i].style.display = ''; <br />108 } <br />109 if ( maxRow == 0 ){ <br />110 preText(); <br />111 firstText(); <br />112 } <br />113 showPage(); <br />114 nextLink(); <br />115 lastLink(); <br />116 } <br />117 <br />118 //第一页 <br />119 function first(){ <br />120 hideTable(); <br />121 page = 1; <br />122 for ( var i = 0; i<pageSize; i++ ){ <br />123theUL.getElementsByTagName("li")[i].style.display = ''; <br />124 } <br />125 showPage(); <br />126 firstText(); <br />127 preText(); <br />128 nextLink(); <br />129 lastLink(); <br />130 } <br />131 <br />132 //最后一页 <br />133 function last(){ <br />134 hideTable(); <br />135 page = pageCount(); <br />136 currentRow = pageSize * (page - 1); <br />137 for ( var i = currentRow; i<numberRowsInTable; i++ ){ <br />138theUL.getElementsByTagName("li")[i].style.display = ''; <br />139 } <br />140 showPage(); <br />141 preLink(); <br />142 nextText(); <br />143 firstLink(); <br />144 lastText(); <br />145 } <br />146 <br />147 function hideTable(){ <br />148 for ( var i = 0; i<numberRowsInTable; i++ ){ <br />149theUL.getElementsByTagName("li")[i].style.display = 'none'; <br />150 } <br />151 } <br />152 <br />153 function showPage(){ <br />154 pageNum.innerHTML = page; <br />155 } <br />156 <br />157 //总共页数 <br />158 function pageCount(){ <br />159 return Math.ceil(numberRowsInTable/pageSize); <br />160 } <br />161 //显示链接 <br />162 function preLink(){ <br />163 spanPre.innerHTML = "<a href='javascript:pre();'>上一页"; <br />164 } <br />165 function preText(){ <br />166 spanPre.innerHTML = "上一页"; <br />167 } <br />168 function nextLink(){ <br />169 spanNext.innerHTML = "<a href='javascript:next();'>下一页"; <br />170 } <br />171 function nextText(){ <br />172 spanNext.innerHTML = "下一页"; <br />173 } <br />174 function firstLink(){ <br />175 spanFirst.innerHTML = "<a href='javascript:first();'>首页"; <br />176 } <br />177 function firstText(){ <br />178 spanFirst.innerHTML = "首页"; <br />179 } <br />180 function lastLink(){ <br />181 spanLast.innerHTML = "<a href='javascript:last();'>末页"; <br />182 } <br />183 function lastText(){ <br />184 spanLast.innerHTML = "末页"; <br />185 } <br />186 <br />187 //隐藏 <br />188 function hide(){ <br />189 for ( var i = pageSize; i<numberRowsInTable; i++ ){ <br />190theUL.getElementsByTagName("li")[i].style.display = 'none'; <br />191 } <br />192 totalPage.innerHTML = pageCount(); <br />193 pageNum.innerHTML = '1'; <br />194 nextLink(); <br />195 lastLink(); <br />196 } <br />197 hide(); <br />198</script> 
199
200
201
202
203

204