js分页_js控制页面显示三条数据-CSDN博客

本文链接：https://blog.csdn.net/chennnm/article/details/78164629

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>