自我反思--table的简单数据分页
自我反思
几天没有写工作总结了，整个人都变得懒散了。公司的工作也确实是不紧张，对于我这种自制力不强的人简直是。。。（想不到词了），完全放了风了。。。每天逛逛淘宝，买些乱七八糟其实并没有什么用处的东西，逛逛论坛，吐槽各种新鲜事，和朋友唠唠嗑，唠到人家都去忙了，完了就盯着电脑发呆等着下班。。还好本姑娘今天幡然醒悟，还是要自己逼着自己去做点神码的，不然明儿自己都不知道自己咋死的。。哈
学习
之前做的东西，用到table里面数据的分页小标签都是用的插件，好看又方便，今天脑子抽抽了看了看人家的代码，大写的蒙圈，就找了找简单的，还好俺这个小菜鸟还算能看懂，学者比划了两下子，以后慢慢做的漂亮些就能用到项目里面了，哈哈，我骄傲！
第一个：实现的很常见很简单的显示页数翻页
效果图：
- 这是HTML代码，很简单滴（我好像看到了被嫌弃的小眼神）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <script src="js0/jquery-1.11.3.js"></script> 6 <script src="js0/demo.js"></script> 7 <link rel="stylesheet" href="js0/demo.css"/> 8 <title></title> 9 </head> 10 <body> 11 <table width="200" border="1"> 12 <thead> 13 <tr> 14 <th>姓名</th> 15 <th>性别</th> 16 <th>编号</th> 17 <th>年龄</th> 18 </tr> 19 </thead> 20 <tbody> 21 <tr> 22 <td>张三</td> 23 <td>男</td> 24 <td>001</td> 25 <td>15</td> 26 </tr> 27 <tr> 28 <td>tom</td> 29 <td>男</td> 30 <td>002</td> 31 <td>15</td> 32 </tr> 33 <tr> 34 <td>李四</td> 35 <td>男</td> 36 <td>003</td> 37 <td>15</td> 38 </tr> 39 <tr> 40 <td>二蛋</td> 41 <td>男</td> 42 <td>004</td> 43 <td>15</td> 44 </tr> 45 <tr> 46 <td>二丫</td> 47 <td>女</td> 48 <td>005</td> 49 <td>15</td> 50 </tr> 51 </tbody> 52 </table> 53 </body> 54 </html>
- 下面就是JS代码了
1 $(function(){ 2 var $table=$('table');//获取表格对象 3 var currentPage=0;//设置当前页默认值为0 4 var pageSize=2;//设置每一页要显示的数目 5 $table.bind('paging', function () { 6 $table.find('tbody tr').hide().slice(currentPage*pageSize,(currentPage+1)*pageSize).show(); 7 //先将tbody中所有的行隐藏，再通过slice结合当前页数和页面显示的数目展现数据 8 }); 9 var sumRows=$table.find('tbody tr').length;//获取数据总行数 10 var sumPages=Math.ceil(sumRows/pageSize);//得到总页数 11 var $pager=$('<div class="page"></div>'); 12 for(var pageIndex=0;pageIndex<sumPages;pageIndex++){ 13 $('<a href="#"><span>'+(pageIndex+1)+'</span></a>').bind("click",{"newPage":pageIndex},function(event){ 14 currentPage=event.data["newPage"]; 15 $table.trigger("paging"); 16 //为每一个要显示的页数上添加触发分页函数 17 }).appendTo($pager); 18 $pager.append(" "); 19 } 20 $pager.insertAfter($table); 21 $table.trigger("paging"); 22 });
第二个：实现前进页和后退页
效果图：
- 这是全部代码，用得原生JS，依然还是很简单滴（好像对原生js有种莫名的喜爱，有木有）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>table分页</title> 6 </head> 7 <body> 8 <style type="text/css"> 9 .tablebox{border:solid 1px #ddd;} 10 .tablebox td{text-align:center;border:solid 1px #ddd;padding:5px;} 11 </style> 12 13 <div style="width:530px;margin:0 auto;"> 14 <table class="tablebox" width="500" border="0" cellpadding="0" cellspacing="0"> 15 <tbody id="table2"> 16 <tr> 17 <td>1</td> 18 <td> </td> 19 <td> </td> 20 <td> </td> 21 <td> </td> 22 </tr> 23 <tr> 24 <td>2</td> 25 <td> </td> 26 <td> </td> 27 <td> </td> 28 <td> </td> 29 </tr> 30 <tr> 31 <td>3</td> 32 <td> </td> 33 <td> </td> 34 <td> </td> 35 <td> </td> 36 </tr> 37 <tr> 38 <td>4</td> 39 <td> </td> 40 <td> </td> 41 <td> </td> 42 <td> </td> 43 </tr> 44 <tr> 45 <td>5</td> 46 <td> </td> 47 <td> </td> 48 <td> </td> 49 <td> </td> 50 </tr> 51 <tr> 52 <td>6</td> 53 <td> </td> 54 <td> </td> 55 <td> </td> 56 <td> </td> 57 </tr> 58 <tr> 59 <td>7</td> 60 <td> </td> 61 <td> </td> 62 <td> </td> 63 <td> </td> 64 </tr> 65 <tr> 66 <td>8</td> 67 <td> </td> 68 <td> </td> 69 <td> </td> 70 <td> </td> 71 </tr> 72 <tr> 73 <td>9</td> 74 <td> </td> 75 <td> </td> 76 <td> </td> 77 <td> </td> 78 </tr> 79 <tr> 80 <td>10</td> 81 <td> </td> 82 <td> </td> 83 <td> </td> 84 <td> </td> 85 </tr> 86 <tr> 87 <td>11</td> 88 <td> </td> 89 <td> </td> 90 <td> </td> 91 <td> </td> 92 </tr> 93 <tr> 94 <td>12</td> 95 <td> </td> 96 <td> </td> 97 <td> </td> 98 <td> </td> 99 </tr><tr> 100 <td>13</td> 101 <td> </td> 102 <td> </td> 103 <td> </td> 104 <td> </td> 105 </tr><tr> 106 <td>14</td> 107 <td> </td> 108 <td> </td> 109 <td> </td> 110 <td> </td> 111 </tr><tr> 112 <td>15</td> 113 <td> </td> 114 <td> </td> 115 <td> </td> 116 <td> </td> 117 </tr> 118 </tbody> 119 </table> 120 121 <div style="height:30px;margin:20px 0 0 0;"> 122 <span id="spanFirst">第一页</span> 123 <span id="spanPre">上一页</span> 124 <span id="spanNext">下一页</span> 125 <span id="spanLast">最后一页</span> 126 第<span id="spanPageNum"></span>页/共 127 <span id="spanTotalPage"></span>页 128 </div> 129 </div> 130 <script type="text/javascript"> 131 var theTable = document.getElementById("table2"); 132 var totalPage = document.getElementById("spanTotalPage"); 133 var pageNum = document.getElementById("spanPageNum"); 134 var spanPre = document.getElementById("spanPre"); 135 var spanNext = document.getElementById("spanNext"); 136 var spanFirst = document.getElementById("spanFirst"); 137 var spanLast = document.getElementById("spanLast"); 138 var numberRowsInTable = theTable.rows.length; 139 var pageSize = 6; 140 var page = 1; 141 //下一页 142 function next() { 143 hideTable(); 144 currentRow = pageSize * page; 145 maxRow = currentRow + pageSize; 146 if ( maxRow > numberRowsInTable ) 147 maxRow = numberRowsInTable; 148 for ( var i = currentRow; i< maxRow; i++ ) { 149 theTable.rows[i].style.display = ''; 150 } 151 page++; 152 if ( maxRow == numberRowsInTable ){ 153 nextText(); 154 lastText(); 155 } 156 showPage(); 157 preLink(); 158 firstLink(); 159 } 160 161 //上一页 162 function pre() { 163 hideTable(); 164 page--; 165 currentRow = pageSize * page; 166 maxRow = currentRow - pageSize; 167 if ( currentRow > numberRowsInTable ) 168 currentRow = numberRowsInTable; 169 for ( var i = maxRow; i< currentRow; i++ ) { 170 theTable.rows[i].style.display = ''; 171 } 172 if ( maxRow == 0 ) { 173 preText(); 174 firstText(); 175 } 176 showPage(); 177 nextLink(); 178 lastLink(); 179 } 180 //第一页 181 function first() { 182 hideTable(); 183 page = 1; 184 for ( var i = 0; i<pageSize; i++ ) { 185 theTable.rows[i].style.display = ''; 186 } 187 showPage(); 188 189 preText(); 190 nextLink(); 191 lastLink(); 192 } 193 194 //最后一页 195 function last() { 196 hideTable(); 197 page = pageCount(); 198 currentRow = pageSize * (page - 1); 199 for ( var i = currentRow; i<numberRowsInTable; i++ ) { 200 theTable.rows[i].style.display = ''; 201 } 202 showPage(); 203 204 preLink(); 205 nextText(); 206 firstLink(); 207 } 208 209 function hideTable() { 210 for ( var i = 0; i<numberRowsInTable; i++ ) { 211 theTable.rows[i].style.display = 'none'; 212 } 213 } 214 215 function showPage() { 216 pageNum.innerHTML = page; 217 } 218 219 //总共页数 220 function pageCount() { 221 var count = 0; 222 if ( numberRowsInTable%pageSize != 0 ) count = 1; 223 return parseInt(numberRowsInTable/pageSize) + count; 224 } 225 226 //显示链接 227 function preLink() { spanPre.innerHTML = "<a href='javascript:pre();'>上一页</a>"; } 228 function preText() { spanPre.innerHTML = "上一页"; } 229 230 function nextLink() { spanNext.innerHTML = "<a href='javascript:next();'>下一页</a>"; } 231 function nextText() { spanNext.innerHTML = "下一页"; } 232 233 function firstLink() { spanFirst.innerHTML = "<a href='javascript:first();'>第一页</a>"; } 234 function firstText() { spanFirst.innerHTML = "第一页"; } 235 236 function lastLink() { spanLast.innerHTML = "<a href='javascript:last();'>最后一页</a>"; } 237 function lastText() { spanLast.innerHTML = "最后一页"; } 238 239 //隐藏表格 240 function hide() { 241 for ( var i = pageSize; i<numberRowsInTable; i++ ) { 242 theTable.rows[i].style.display = 'none'; 243 } 244 245 totalPage.innerHTML = pageCount(); 246 pageNum.innerHTML = '1'; 247 248 nextLink(); 249 lastLink(); 250 } 251 252 hide(); 253 </script> 254 255 </body> 256 </html>
虽然东西不多，也很简单，但是学习不就是一点一滴的积累吗，我们最大的敌人就是懒惰，克服它，加油！
js是很博大精深的，很多时候我们看代码的时候会觉得我们会用了，可是自己动手敲代码的时候脑袋又是空空如也，归根结底还是代码敲得少，而且看的代码也少，许多逻辑还想不到，所以，还是要多多的动手，不要总是cv大法（我总是这样，快捷又方便，以至于我现在轮播广告都快不记得源码用的啥了）。
改掉坏习惯！
