你的位置:首页 > Java教程

[Java教程]自我反思


 

自我反思

 几天没有写工作总结了,整个人都变得懒散了。公司的工作也确实是不紧张,对于我这种自制力不强的人简直是。。。(想不到词了),完全放了风了。。。每天逛逛淘宝,买些乱七八糟其实并没有什么用处的东西,逛逛论坛,吐槽各种新鲜事,和朋友唠唠嗑,唠到人家都去忙了,完了就盯着电脑发呆等着下班。。还好本姑娘今天幡然醒悟,还是要自己逼着自己去做点神码的,不然明儿自己都不知道自己咋死的。。哈

学习

 

之前做的东西,用到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 ></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>&nbsp;</td> 19         <td>&nbsp;</td> 20         <td>&nbsp;</td> 21         <td>&nbsp;</td> 22       </tr> 23       <tr> 24         <td>2</td> 25         <td>&nbsp;</td> 26         <td>&nbsp;</td> 27         <td>&nbsp;</td> 28         <td>&nbsp;</td> 29       </tr> 30       <tr> 31         <td>3</td> 32         <td>&nbsp;</td> 33         <td>&nbsp;</td> 34         <td>&nbsp;</td> 35         <td>&nbsp;</td> 36       </tr> 37       <tr> 38         <td>4</td> 39         <td>&nbsp;</td> 40         <td>&nbsp;</td> 41         <td>&nbsp;</td> 42         <td>&nbsp;</td> 43       </tr> 44       <tr> 45         <td>5</td> 46         <td>&nbsp;</td> 47         <td>&nbsp;</td> 48         <td>&nbsp;</td> 49         <td>&nbsp;</td> 50       </tr> 51       <tr> 52         <td>6</td> 53         <td>&nbsp;</td> 54         <td>&nbsp;</td> 55         <td>&nbsp;</td> 56         <td>&nbsp;</td> 57       </tr> 58       <tr> 59         <td>7</td> 60         <td>&nbsp;</td> 61         <td>&nbsp;</td> 62         <td>&nbsp;</td> 63         <td>&nbsp;</td> 64       </tr> 65       <tr> 66         <td>8</td> 67         <td>&nbsp;</td> 68         <td>&nbsp;</td> 69         <td>&nbsp;</td> 70         <td>&nbsp;</td> 71       </tr> 72       <tr> 73         <td>9</td> 74         <td>&nbsp;</td> 75         <td>&nbsp;</td> 76         <td>&nbsp;</td> 77         <td>&nbsp;</td> 78       </tr> 79       <tr> 80         <td>10</td> 81         <td>&nbsp;</td> 82         <td>&nbsp;</td> 83         <td>&nbsp;</td> 84         <td>&nbsp;</td> 85       </tr> 86       <tr> 87         <td>11</td> 88         <td>&nbsp;</td> 89         <td>&nbsp;</td> 90         <td>&nbsp;</td> 91         <td>&nbsp;</td> 92       </tr> 93       <tr> 94         <td>12</td> 95         <td>&nbsp;</td> 96         <td>&nbsp;</td> 97         <td>&nbsp;</td> 98         <td>&nbsp;</td> 99       </tr><tr>100         <td>13</td>101         <td>&nbsp;</td>102         <td>&nbsp;</td>103         <td>&nbsp;</td>104         <td>&nbsp;</td>105       </tr><tr>106         <td>14</td>107         <td>&nbsp;</td>108         <td>&nbsp;</td>109         <td>&nbsp;</td>110         <td>&nbsp;</td>111       </tr><tr>112         <td>15</td>113         <td>&nbsp;</td>114         <td>&nbsp;</td>115         <td>&nbsp;</td>116         <td>&nbsp;</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大法(我总是这样,快捷又方便,以至于我现在轮播广告都快不记得源码用的啥了)。

改掉坏习惯!