封装ajax请求数据翻页效果

来源：互联网发布：jdk 8u5 windows i586 编辑：程序博客网时间：2024/06/02 06:17

<!DOCTYPE html><html><head>    <meta charset="UTF-8"/>    <title>优惠券管理</title>    <link rel="stylesheet" type="text/css" href="../static/css/common.css" />    <script type="text/javascript" src="../static/js/jquery.js"></script></head><body><div class="containers">    <div class="header">        <span><a href="#"><i>首页</i></a></span>        <span><i>Hi</i><a href="#"><i>deric</i></a><a href="#"><i>退出</i></a><a href="#"></a></span>    </div><!--左侧导航-->    <div class="content_left">        <div class="sidebar-title" id="pick_up_menu" title="收起菜单">            <h2> 收起菜单</h2>        </div>        <div class="sidebar-content">            <ul class="sidebar-list">                <li>                    <a href="#" class="icon_father">商家管理</a>                    <ul class="sub-menu">                        <li><a href="#">商家信息</a></li>                        <li><a href="#"> 优惠券管理</a></li>                    </ul>                </li>                <li>                    <a href="#" class="icon_father">体现处理</a>                    <ul class="sub-menu">                        <li><a href="#">设置汇率</a></li>                    </ul>                </li>            </ul>        </div>    </div><!--右侧区域-->    <div class="content_right">        <div class="progress_nav">            <a href="#"><strong>首页 ></strong></a>            <a href="#"><strong>商家管理 ></strong></a>             <a href="#"><strong>商家账号 ></strong></a>             <a href="#"><strong class="font_primary">创建商家账号</strong></a>        </div>        <div class="seller_info">优惠券管理</div>        <div class="space_10 cf"></div>        <!--优惠券名称及其查询一栏-->        <div class="coupon_name_area cf">            <span>优惠名称</span>            <input type="text">        </div>        <!--优惠券筛选-->        <div class="coupon_name_wraper">            <ul class="coupon_tab_nav">                <li class="all_coupon">筛选</li>            </ul>        </div>        <!--表格标签页1 全部-->        <div class="coupon_table_wrapper coupon_table_wrapper2" id="all_coupon">            <table class="table_area" id="table_area_1">                <tr id="insert_mark_area">                    <th>序号全部</th>                    <th>商家名称</th>                    <th id="th_12">                        优惠券总数                        <i onclick="campare(this)">                            <img src="../static/images/up.png">                        </i>                    </th>                    <th id="th_13">                        未发布                        <i onclick="campare(this)">                            <img src="../static/images/up.png">                        </i>                    </th>                    <th id="th_14">                        生效中                        <i onclick="campare(this)">                            <img src="../static/images/up.png"></i>                        </th>                    <th id="th_15">                        已失效                        <i onclick="campare(this)">                            <img src="../static/images/up.png">                        </i>                    </th>                    <th>操作</th>                </tr>            </table>            <div class="list-page">            <strong><a href="javascript:void(0)" id="prePage">上一页</a></strong>            <strong id="current_page"></strong>            <strong>/</strong>            <strong id="page_size"></strong>            <strong>页</strong>            <strong><a href="javascript:void(0)" id="nextPage">下一页</a></strong>            </div>        </div>    <!--container_right-->    </div>    <!--结束-->       </div>     <script type="text/javascript">$(document).ready(function(){//左侧下拉菜单    $(".sidebar-list>li>a").click(function(){        $(".sidebar-list>li>ul").hide();        $(this).next().show(500);    });    $("#pick_up_menu").click(function(){        $(".sidebar-list>li>ul").hide(200);    });});//默认序号function soretFunction(){var i=0;//全部优惠券$(".sort_fun1").each(function(){i++;$(this).text(i);});}//排序方法function campare(This){    var index=This.parentNode.id.substring(4);    var target_id=$(This).parent().parent().parent();    var target_class=$(This).parent().parent().next('tr').attr('class');    var firstVal=$(This).parent().parent().next("tr").children('td').eq(index).text();    var lastVal=$(This).parent().parent().parent().find("tr:last").children('td').eq(index).text();    var result = $('.'+target_class).toArray().sort(function(a,b){    if (firstVal < lastVal) {        return parseInt($(b).find("td").eq(index).text()) - parseInt($(a).find("td").eq(index).text())     }else{        return parseInt($(a).find("td").eq(index).text()) - parseInt($(b).find("td").eq(index).text())          };    });//排序小图标切换    ($(This).children('img').attr('src')=='../static/images/down.png') ?     $(This).children('img').attr('src','../static/images/up.png'):     $(This).children('img').attr('src','../static/images/down.png');    $(result).appendTo(target_id);    soretFunction();}  //封装ajax    var numPage;    var Ajax=function(numPage){        $.ajax({            url: "http://51b32385.ngrok.natapp.cn/admin/getCouponCountList.do",            type:"POST",            async: false,            data: {                    numPage: numPage,   //当前页码                    numSize: 2   //一页显示多少条数据 0 显示所有                },            success:function(json){                    pages=json.pages;  //总有多少页                //当前页码                $("#current_page").text(numPage);                //总共多少页                $("#page_size").text(pages);                $('tr').not('#insert_mark_area').empty();                console.log(json.list);                     for (var i in json.list) {                        var str='';                        str +=  "<tr class='sort1'>" +                                  "<td class='sort_fun1'></td>"+                                "<td>"+json.list[i].vi_name+"</td>"+                                "<td>"+json.list[i].total+"</td>"+                                "<td>"+json.list[i].unreleased+"</td>"+                                "<td>"+json.list[i].effective+"</td>"+                                "<td>"+json.list[i].expired+"</td>"+                                "<td><stong><a href='couponDetails.html?="+json.list[i].merchant_id+"'>详情</a></stong><strong>  </strong><stong><a href='merchantDetails.html'>新建</a></stong></td>"+                                "</tr>";                        $('table').append(str);                        soretFunction();            }        },            error:function(e){                alert(e);            }           });};    //打开页面时候使用    Ajax(1);    //点击进行翻页的时候    $("#nextPage").click(function(){        //点击下一页        numPage=$("#current_page").text();//当前页数        if(numPage<pages){            numPage++;            $("#current_page").text(numPage);            Ajax(numPage);        }else{            alert("已经是最后1页了！");        }    });    //点击上一页    $("#prePage").click(function(){        numPage=$("#current_page").text();//当前页数         if(numPage>1){            numPage--;            $("#current_page").text(numPage);            Ajax(numPage);        }else{            alert("已经是第页了！");        }    });</script></body></html>

服务器关闭，导致最终图片暂时显示不了。

0 0