• 自我反思--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="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大法(我总是这样,快捷又方便,以至于我现在轮播广告都快不记得源码用的啥了)。

    改掉坏习惯!

  • 相关阅读:
    Java爬取丁香医生疫情数据并存储至数据库
    mysql 获取昨天日期、今天日期、明天日期以及前一个小时和后一个小时的时间
    java.lang.UnsatisfiedLinkError: /usr/openv/java/jre/lib/amd64/libawt_xawt.so: libXtst.so.6: cannot open shared object file: No such file or directory
    Linux下打包压缩war、解压war包和jar命令
    Linux常用基本命令大全
    Git在eclipse中的配置
    CentOS 7 安装Rabbitmq
    Jmeter测试普通java类说明
    单例模式的7中写法
    Hyperledger Fabric 1.0 学习搭建 (五)--- 启动Fabric多节点集群
  • 原文地址:https://www.cnblogs.com/guofei0925/p/5531629.html
Copyright © 2020-2023  润新知