封装ajax请求数据翻页效果

原创 2016年08月30日 20:03:47
<!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>
服务器关闭,导致最终图片暂时显示不了。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

实现Ajax翻页效果

实现Ajax翻页效果: list.aspx 分页效果示例 body { font-size:0.75em;} input { margin:5px 5px 0;...

使用Ajax动态添加表格获得后台数据翻页异步刷新(struts2下)

用Ajax生成表格不能使用Jquery动作 ,只能用js,因为没法获得id 和name属性 如果有三层字符串双单引号嵌套的话可以用转义符‘’\‘’ 一开始在js中[注解Mark问题处]一开始在ap...
  • i9577
  • i9577
  • 2016-03-21 17:46
  • 1170

ajax(三)之省市二级菜单联动(从sql获取数据),无刷新翻页

分析:二级菜单栏,主要是数据库的设计,设计好就非常简单。第2级菜单栏中带有1级菜单栏的索引,只要有一级菜单栏的索引,就可以找到城市。上代码 思路:获取一级菜单省份de值,在Servlet中收集到...

ajax进行异步请求数据添加loading效果

在与后台实现数据交互时经常会遇到一种这样的情况: 1.需要用一个ajax请求后台数据,并且要在获取到数据之后再渲染到页面,这个时候就必须用同步(async:false)。 2.然而在这个时...

【Python爬虫】利用Selenium等待Ajax加载及模拟自动翻页,爬取东方财富网公司公告

1.背景 首先,打开东方财富网公司公告页面(“http://data.eastmoney.com/notices/”)。 单击右键,选择检查“长江电力”处的源代码,如图: 点击右键,查看源代码...

真实书籍翻页效果

  • 2016-02-01 18:00
  • 896KB
  • 下载

一步步实现Viewpager卡片翻页效果

源码地址:https://github.com/NateRobinson/CardStackViewpager 这个CardStackViewpager的灵感来自Github上面的 Flippab...

翻页效果,模仿ibook

动画-翻页效果

  • 2014-01-24 12:31
  • 1.79MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)