封装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请求GET/POST方法的封装

html lang="en"> head>     meta charset="UTF-8">     title>GET请求封装title> head> body> script type="tex...
  • liang526011569
  • liang526011569
  • 2016年11月29日 21:17
  • 1693

利用分页插件对Ajax请求到后台数据进行分页

1.在学习过程中,积累和思考是必须的,所以我还是选择用博客一边记录一边学习 一款简单的分页插件下载地址: 插件下载地址 解压之后分别把.css文件和.js文件导入相应的项目文件夹中,并且在页面中...
  • Chauncymaster
  • Chauncymaster
  • 2017年05月06日 17:01
  • 1972

封装好的Ajax调用函数以及基本方法总结

学了Ajax,今天来一个总结 首先什么是Ajax:Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。直白...
  • u012036171
  • u012036171
  • 2015年04月12日 10:09
  • 2043

实现Ajax翻页效果

实现Ajax翻页效果: list.aspx 分页效果示例 body { font-size:0.75em;} input { margin:5px 5px 0;...
  • SANGLIU
  • SANGLIU
  • 2013年03月13日 21:01
  • 2495

不需要ajax实现搜索数据保留翻页

今天突发奇想,不需要ajax实现翻页效果,并且保留页面搜索数据及其他填写数据,在DZ框架中实现,效果一样! html{_overflow-y:scroll} .one {background-col...
  • lunsunhuan1825
  • lunsunhuan1825
  • 2017年11月12日 13:36
  • 50

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

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

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

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

AngularJS封装指令实现下拉刷新自动翻页加载数据

目前PC的网页越来越流行瀑布流的下拉刷新自动加载数据,本文来讲解一下。 滚动翻页基本原理就是判断scrollTop和offsetHeight之和 大于等于 scrollHeight。 一、...
  • fishermanmax
  • fishermanmax
  • 2016年08月25日 17:17
  • 5137

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

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

ajax无翻页刷新简单实例2

1,HTML页面: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">...
  • xiaojie_cp
  • xiaojie_cp
  • 2015年05月21日 15:21
  • 159
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:封装ajax请求数据翻页效果
举报原因:
原因补充:

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