自我反思
幾天沒有寫工作總結了，整個人都變得懶散了。公司的工作也確實是不緊張，對於我這種自制力不強的人簡直是。。。（想不到詞了），完全放了風了。。。
每天逛逛淘寶，買些亂七八糟其實並沒有什么用處的東西，逛逛論壇，吐槽各種新鮮事，和朋友嘮嘮嗑，嘮到人家都去忙了，完了就盯着電腦發呆等着下班。。
還好本姑娘今天幡然醒悟，還是要自己逼着自己去做點神碼的，不然明兒自己都不知道自己咋死的。。哈
學習
之前做的東西，用到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大法（我總是這樣，快捷又方便，以至於我現在輪播廣告都快不記得源碼用的啥了）。
改掉壞習慣！
