自我反思
几天没有写工作总结了,整个人都变得懒散了。公司的工作也确实是不紧张,对于我这种自制力不强的人简直是。。。(想不到词了),完全放了风了。。。每天逛逛淘宝,买些乱七八糟其实并没有什么用处的东西,逛逛论坛,吐槽各种新鲜事,和朋友唠唠嗑,唠到人家都去忙了,完了就盯着电脑发呆等着下班。。还好本姑娘今天幡然醒悟,还是要自己逼着自己去做点神码的,不然明儿自己都不知道自己咋死的。。哈学习
之前做的东西,用到table里面数据的分页小标签都是用的插件,好看又方便,今天脑子抽抽了看了看人家的代码,大写的蒙圈,就找了找简单的,还好俺这个小菜鸟还算能看懂,学者比划了两下子,以后慢慢做的漂亮些就能用到项目里面了,哈哈,我骄傲!
第一个:实现的很常见很简单的显示页数翻页
效果图:
- 这是HTML代码,很简单滴(我好像看到了被嫌弃的小眼神)
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <script src='/images/loading.gif' data-original="js0/jquery-1.11.3.js"></script> 6 <script src='/images/loading.gif' data-original="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>
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> </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**(我总是这样,快捷又方便,以至于我现在轮播广告都快不记得源码用的啥了)。
改掉坏习惯!
原标题:自我反思
关键词: