Java之Springboot页面thymeleaf的ajax分页页面

最新推荐文章于 2022-11-27 19:24:27 发布
不知春夏，不知秋冬
最新推荐文章于 2022-11-27 19:24:27 发布
阅读量398
点赞数
分类专栏：前端 Java 文章标签： java
本文链接：https://blog.csdn.net/qq_40286424/article/details/108594999
版权
前端同时被 2 个专栏收录
21 篇文章 0 订阅
订阅专栏
Java
14 篇文章 0 订阅
订阅专栏
<html lang="en">
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,minimal-ui">
    <meta name="format-detection" content="telephone=no">
    <meta name="screen-orientation" content="portrait"><!-- uc强制竖屏 -->
    <meta name="x5-orientation" content="portrait"><!-- QQ强制竖屏 -->
    <meta name="apple-mobile-web-app-capable" content="yes" >
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta charset="UTF-8">
    <title>历史订单</title>

    <link rel="stylesheet" href="../basic/css/bingding.css">
    <link rel="stylesheet" href="../basic/css/payment.css">
    <script type="text/javascript" src="../basic/js/binding.js"></script>
    <script type="text/javascript" src="../basic/js/jquery-3.2.1.min.js"></script>
    <style>
        #page{display:inline;}

    </style>

    <script type="text/javascript">

        //下拉框选择调用
        function Change() {
            $("#pages").html(1);//恢复默认值第一页
            paging( f());
        }
        //点击 上一页 下一页 调用
        function gradeChange() {
            paging(f());
        }

        function f() {
            var myselect = document.getElementById("pid");
            var index=myselect.selectedIndex;
            // selectedIndex代表的是你所选中项的index
            var status = myselect.options[index].value;//支付状态
            return status;
        }


      function  previousPage(){
          var page =$("#pages").text(); //当前页
          var pg=$("#pg").text(); //总页数
          if (page>1){
              page=page-1;
              $("#pages").html(page);
              gradeChange();
          }
      }
      function nextPage() {
          var page =Number($("#pages").text()); //当前页
          var pg=Number($("#pg").text()); //总页数
          if (page < pg){
              page=page+1;
              $("#pages").html(page);
              gradeChange();
          }
      }
        // Load(); //加载数据
        function paging(status) {

            var openid=$("#openid").val();
            var page =$("#pages").text(); //当前页
            // alert("status:"+status);
            // alert("openid:"+openid);
            // alert("page:"+page);
            $.ajax({
                url: "PaymentPages",
                data: {
                    start: page,
                    openid:openid,
                    status:status
                },
                type: "POST",
                dataType: "JSON",
                success: function(data) {
                    // var a=data.get("payments").length;
                    //alert("总页数："+data.pages);
                    var pages=data.pages;

                    if(pages ==0){
                        pages=1;
                    }
                    $("#pg").html(pages);//总页数
                    $(".div_form").remove();//删除

                    var str = "";
                    for(var k in data.payments) {

                        // "+data.payments[k].id+" 支付订单id
                        str+="<div class=\"div_form\" style=\"display: block\">\n" +
                            "            <div class=\"div_text\"  >\n" +
                            "                <div >\n" +
                            "                    <div class=\"div_key1\" > "+data.payments[k].numberPlate+" </div>\n" +
                            "                    <div class=\"div_val div_valNub\" >¥"+data.payments[k].fee+"元</div>\n" +
                            "                </div>\n" +
                            "                <div>\n" +
                            "                    <div class=\"div_key\"  >停车场:"+data.payments[k].parkingRecordId+"</div>\n" +
                            "                    <div class=\"div_val  \" >* </div>\n" +
                            "                </div>\n" +
                            "                <div>\n" +
                            "                    <div class=\"div_key\"  >停车时间:"+data.payments[k].arriveTime+"</div>\n" +
                            "                    <div class=\"div_val \"  >*</div>\n" +
                            "                </div>\n";
                        if (data.payments[k].payTime!=null){


                        var pay= "          <div>\n" +
                            "                    <div class=\"div_key\"  >支付时间:"+data.payments[k].payTime+"</div>\n" +
                            "                    <div class=\"div_val \"  >*</div>\n" +
                            "                </div>" ;
                            str+=pay;//是否显示支付时间
                        }
                        str+= "             <div>\n" +
                            "                    <div class=\"div_key\">订单状态:"+data.payments[k].status+"</div>\n" +
                            "                    <div class=\"div_val\">*</div>\n" +
                            "                </div>\n" +
                            "            </div>\n" +
                            "        </div>\n" +
                            "    </div> "

                    }
                    $(".divs").html(str);
                }
            });
        }


    </script>

</head>
<body>
<div id="body">

    <div style="display: none">
        openid: <input id="openid" type="text" name="openid" th:value="${openid}"><br>
    </div>
    <div class="div_name" style="margin-top:20px; ">
        历史订单
    </div>

    <div style="width: 100%;height: 50px;margin-top: 20px;">
        <div style="float: left;width:70%;height: 50px;float: left;margin-top: 6px;"  >
            <table border="0" cellspacing="0" cellpadding="0"  >
                <tr>
                    <td align="right">
                       <a   href="javascript:void(0);" onclick="previousPage()" >[上一页]</a>  
                        <a href="#"><span id="pages" value="1">1</span>/<span id="pg" value="1" th:text="${pages}">1</span>页</a>  
                       <a   href="javascript:void(0);" onclick="nextPage()">[下一页]</a>  
                    </td>
                </tr>
            </table>
        </div>
        <div style="float: right;width:30%;height: 50px;" >
            <select style="width:100%; height: 30px;" id="pid" onchange="Change()">
                <option value="支付成功">支付成功</option>
                <option value="未支付">未支付</option>
                <option value="已关闭">已关闭</option>
                <option value="已退款">已退款</option>
            </select>
        </div>
    </div>
<!--    οnclick="location.href='orderInfo.html?id=xx'"-->
    <div class="divs">
        <div class="div_form" style="display: block"  th:each="payments:${payments}" >
            <div class="div_text"  >
                <div >
                    <div class="div_key1"  th:text="${payments.numberPlate}">   渝A·66666</div>
                    <div class="div_val div_valNub"  th:text="'¥'+${payments.fee}+'元'" >¥136元</div>
                </div>
                <div>
                    <div class="div_key" th:text="'停车场:'+${payments.parkingRecordId}">重庆日月光停车场A区</div>
                    <div class="div_val  " >* </div>
                </div>
                <div>
                    <div class="div_key" th:text="'停车时间:'+${#dates.format(payments.arriveTime,'yyyy-MM-dd HH:mm:ss')}">2019-08-29 12:25:26</div>
                    <div class="div_val "  >*</div>
                </div>
                <div>
                    <div class="div_key" th:text="'支付时间:'+${#dates.format(payments.payTime,'yyyy-MM-dd HH:mm:ss')}">2019-08-29 12:25:26</div>
                    <div class="div_val "  >*</div>
                </div>
                <div>
                    <div class="div_key" th:text="'订单状态:'+${payments.status}" >订单状态</div>
                    <div class="div_val">*</div>
                </div>
            </div>
        </div>
    </div>

    <div class="div_explain" style="background: #ffffff;">
        <div class="div_name">
            历史缴费说明
        </div>
        <div class="div_text">
            <p>1.只会显示最近<span>一年</span>的缴费情况。</p>
            <p>2.关于退款，在缴费记录时间往后一个月以内有效。</p>
        </div>
    </div>
</div>

</body></html>