js分页

来源：互联网发布：unity3d htc vive开发编辑：程序博客网时间：2024/06/15 14:58

js代码

 window.onload = function (){            var ary=[{spdh:"A0001",yspdh:"A00001",cglx:"采购付款",spzt:"待审批",dqspr:"高**",date:"2017-07-20"},//测试数据                     {spdh:"A0002",yspdh:"A00002",cglx:"采购付款",spzt:"待审批",dqspr:"高**",date:"2017-07-19"},                     {spdh:"A0003",yspdh:"A00003",cglx:"采购请求",spzt:"待审批",dqspr:"高**",date:"2017-07-19"},                     {spdh:"A0004",yspdh:"A00004",cglx:"采购请求",spzt:"待审批",dqspr:"高**",date:"2017-07-19"},                     {spdh:"A0005",yspdh:"A00005",cglx:"销售订单",spzt:"待审批",dqspr:"高**",date:"2017-07-19"},                     {spdh:"A0006",yspdh:"A00006",cglx:"销售订单",spzt:"待审批",dqspr:"高**",date:"2017-07-19"},                     {spdh:"A0007",yspdh:"A00007",cglx:"采购付款",spzt:"待审批",dqspr:"高**",date:"2017-07-19"},                     {spdh:"A0008",yspdh:"A00008",cglx:"采购请求",spzt:"待审批",dqspr:"高**",date:"2017-07-19"},                     {spdh:"A0009",yspdh:"A00009",cglx:"销售订单",spzt:"待审批",dqspr:"高**",date:"2017-07-19"},                     {spdh:"A00010",yspdh:"A000010",cglx:"采购付款",spzt:"待审批",dqspr:"高**",date:"2017-07-19"},                     {spdh:"A00011",yspdh:"A00001",cglx:"采购付款",spzt:"待审批",dqspr:"高**",date:"2017-07-20"},                     {spdh:"A00012",yspdh:"A00002",cglx:"采购付款",spzt:"待审批",dqspr:"高**",date:"2017-07-19"},                     {spdh:"A00013",yspdh:"A00003",cglx:"采购请求",spzt:"待审批",dqspr:"高**",date:"2017-07-19"},                     {spdh:"A00014",yspdh:"A00004",cglx:"采购请求",spzt:"待审批",dqspr:"高**",date:"2017-07-19"},                     {spdh:"A00015",yspdh:"A00005",cglx:"销售订单",spzt:"待审批",dqspr:"高**",date:"2017-07-19"},                     {spdh:"A00016",yspdh:"A00006",cglx:"销售订单",spzt:"待审批",dqspr:"高**",date:"2017-07-19"},                     {spdh:"A00017",yspdh:"A00007",cglx:"采购付款",spzt:"待审批",dqspr:"高**",date:"2017-07-19"},                     {spdh:"A00018",yspdh:"A00008",cglx:"采购请求",spzt:"待审批",dqspr:"高**",date:"2017-07-19"},                     {spdh:"A00019",yspdh:"A00009",cglx:"销售订单",spzt:"待审批",dqspr:"高**",date:"2017-07-19"},                     {spdh:"A00020",yspdh:"A000010",cglx:"采购付款",spzt:"待审批",dqspr:"高**",date:"2017-07-19"},                     {spdh:"A00021",yspdh:"A00001",cglx:"采购付款",spzt:"待审批",dqspr:"高**",date:"2017-07-20"},                     {spdh:"A00022",yspdh:"A00002",cglx:"采购付款",spzt:"待审批",dqspr:"高**",date:"2017-07-19"},                     {spdh:"A00023",yspdh:"A00003",cglx:"采购请求",spzt:"待审批",dqspr:"高**",date:"2017-07-19"},                     {spdh:"A00024",yspdh:"A00004",cglx:"采购请求",spzt:"待审批",dqspr:"高**",date:"2017-07-19"},                     {spdh:"A00025",yspdh:"A00005",cglx:"销售订单",spzt:"待审批",dqspr:"高**",date:"2017-07-19"},                     {spdh:"A00026",yspdh:"A00006",cglx:"销售订单",spzt:"待审批",dqspr:"高**",date:"2017-07-19"},                     {spdh:"A00027",yspdh:"A00007",cglx:"采购付款",spzt:"待审批",dqspr:"高**",date:"2017-07-19"},                     {spdh:"A00028",yspdh:"A00008",cglx:"采购请求",spzt:"待审批",dqspr:"高**",date:"2017-07-19"},                     {spdh:"A00029",yspdh:"A00009",cglx:"销售订单",spzt:"待审批",dqspr:"高**",date:"2017-07-19"},                     {spdh:"A00030",yspdh:"A000010",cglx:"采购付款",spzt:"待审批",dqspr:"高**",date:"2017-07-19"}];                     var nums=ary.length/3;                  //按照每页显示3条，并计算出总共需要多少页来显示                     for(var k=1;k<=nums;k++){               //通过循环增加按钮                         $('#map-result').append(                          '<button class="btn btn-success" id="page_'+k+'">'+k+'</button>'//                          )                     }                     for(var i=0; i<3; i++){                //第一次进入需要加载3条数据                        var obj = ary[i];                        $('#map2').append(                            '<div id=style="margin-bottom:40px;margin-top: 80px; ">'+'<p>'+'审批单号:  <span><a href="http://www.baidu.com">'+obj.spdh+'</a></span></p>'+'<br>'+'<p>'+'原始单据号: '+obj.yspdh+'<br><br>'+'单据类型: '+                            obj.cglx+'</p>'+'<br>'+'<p>'+'审批状态:  '+obj.spzt+'   当前审批人: '+obj.dqspr+'</p>'+'<br>'+'<p>'+                            '提交时间:  '+obj.date+'</p>'+'</div>'+'<hr>');                      }                   document.body.onclick = function(event){    //利用事件冒泡处理找出被点击按钮的id                        var id = event.target.id;                        var strs = id.split("_");                        if(strs[0]=="page"){                        document.getElementById('map2').innerHTML = ""; //清空当前页面的内容              for(var j=(strs[1]-1)*3; j<3*strs[1]; j++){                                  //为当前页面添加新的内容                var obj = ary[j];                $('#map2').append(                    '<div id=style="margin-bottom:40px;margin-top: 80px; ">'+'<p>'+'审批单号:  <span><a href="http://www.baidu.com">'+obj.spdh+'</a></span></p>'+'<br>'+'<p>'+'原始单据号: '+obj.yspdh+'<br><br>'+'单据类型: '+                    obj.cglx+'</p>'+'<br>'+'<p>'+'审批状态:  '+obj.spzt+'   当前审批人: '+obj.dqspr+'</p>'+'<br>'+'<p>'+                    '提交时间:  '+obj.date+'</p>'+'</div>'+'<hr>');              }            }          }        }

css代码

 a{            color: #000;        }        #map2-result{            margin-top: 60px;             margin-left: 40px;             margin-bottom:40px;             line-height:15px;            font-family:"等线";            margin-bottom:             style="text-decoration:none; color:#000;"        }

html代码

<body>    <div id="map2" style=" font-size: 19px;">    </div>    <div  id="map-result" class="" style="text-align:center;">    </div></body>

阅读全文

0 0