自我反思 學習 之前做的東西，用到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 //
