封装ajax请求数据翻页效果

最新推荐文章于 2023-10-21 07:52:06 发布
最新推荐文章于 2023-10-21 07:52:06 发布
阅读量291 收藏
点赞数
分类专栏： jquery 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27844941/article/details/52372518
版权 
<!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 οnclick="campare(this)">
                            <img src="../static/images/up.png">
                        </i>
                    </th>
                    <th id="th_13">
                        未发布
                        <i οnclick="campare(this)">
                            <img src="../static/images/up.png">
                        </i>
                    </th>
                    <th id="th_14">
                        生效中
                        <i οnclick="campare(this)">
                            <img src="../static/images/up.png"></i>
                        </th>
                    <th id="th_15">
                        已失效
                        <i οnclick="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>
服务器关闭，导致最终图片暂时显示不了。

qq_27844941
关注
专栏目录
实现Ajax翻页效果
SANGLIU的专栏
03-13 3179
实现Ajax翻页效果: list.aspx 分页效果示例 body { font-size:0.75em;} input { margin:5px 5px 0;} form { margin-bottom:20px;padding:10px;} div#content div#pager { font-family:Courier New;padding
ajax获取列表数据+翻页按钮
miaofangchao的博客
07-06 344
// 顶部框高度支撑 window.onload = function () { $('.TopLogoProp').height($('.TopLogo').height()) $('.TopLogo').css('position', 'fixed') //li的点击事件： $(".pagination>li").on("click", function () { var i; var textNum;//列表要变更的值 var ListLen = $(".
ajax请求后台数据实现分页功能
07-05
ajax请求后台数据实现分页功能
请求Url返回数据较大，使结果分页获取
dazhi0529的博客
08-30 634
首先创建了一个单元测试，如下项目视图： 分页结果映射类PageResult的编写： using System; using System.Collections.Generic; using System.Linq; using System.Text...
jQuery实现分页功能（含ajax请求、后台数据、附完整demo）
10-20
本文介绍的知识点涵盖了jQuery实现分页功能的多个方面，从AJAX请求的发送、模拟后台数据、分页逻辑的实现到代码的具体参数说明，以及实现过程中可能遇到的优缺点分析。通过示例代码和详细的分析，可以帮助开发者更好...
pjax (ajax + pushState的封装) 无刷新翻页等.zip
11-19
Pjax（Page JavaScript XHR）是一种前端技术，主要用于实现网页的无刷新翻页效果。它结合了Ajax（异步JavaScript和XML）和HTML5的History API（尤其是PushState方法），旨在提供更快的页面加载速度，提升用户体验，...
Jquery Ajax分页（有实例）
05-24
jQuery封装了AJAX操作，提供了一套简洁的API，如`$.ajax()`, `$.get()`, `$.post()`等，使开发者能够轻松地实现AJAX请求。 分页通常分为两种类型：服务器端分页和客户端分页。服务器端分页意味着每次用户翻页时，...
asp.net Mvc4 使用ajax结合分页插件实现无刷新分页
10-20
3. 处理分页数据：服务器端的控制器接收到AJAX请求后，根据当前页码和页面大小从数据库中查询数据，并将其封装在分部视图（PartialView）中返回。 4. 更新主视图：浏览器接收服务器返回的数据后，通过回调函数将...
ajax数据编写分页,原生js开发AJAX数据分页请求实例
weixin_42345036的博客
08-05 361
1. 数据交互后台地址数据接口地址 https://route.showapi.com/181-1请求的参数请求账号 showapi_appid: 30603请求密码 showapi_sign:98960666afeb4992ae91971d13494090请求多少条数据 num :8是否随机拉取数据:rand:1从多少页开始请求:pag:1https://route.showapi.com/18...
Django和jQuery，实现Ajax表格数据分页展示
最新发布
weixin_69999177的博客
10-21 2120
需要考虑一个问题：在前端上的分页按钮是有样式的，且样式是根据后端返回的参数进行判断，最终决定给哪一个分页按钮增加样式，为了避免分页数据可以正常获取，但是分页样式不会改变，基于这个问题进行思考，最后的解决方法是：将分页部分的代码也通过Ajax进行渲染。当存在重新请求接口才能返回数据的功能时，若页面的内容很长，每次点击一个功能，页面又回到了顶部，对于用户的体验感不太友好，我们希望当用户点击这类的功能时，能直接加载到数据，请求后端的操作不会呈现在前端，给用户一种无感知的状态。Key的数据渲染到分页的div中。
关于ajax异步请求后台数据进行动态分页
热门推荐
东方不败的好朋友的博客
07-28 1万+
ajax请求后台拿到json类型的数据后，可以在它的success回调方法中进行动态分页，也就是表格重绘，此时，我们需要得到的数据包括：查询得到的数据、数据总条数、总页数、当前页数，其中前三条可在后台获取，对于当前页数，需要从前端获取点击页数再通过请求传递给后台，后台做完相应处理后再传回给前端。 请看如下例子：/** * * @param page 当前页 */
ajax获取动态列表数据后的分页问题
strive_for_myself的博客
08-01 5708
ajax获取动态列表数据后的分页问题 这是我在写前台网站时遇到的一个分页问题，由于数据是通过ajax的方式来请求得到的，如果引入相应的js文件来做分页，假如只是静态的填放数据到列表各项内 容中（列表条数固定），确实不会出现问题。但是要从ajax中获取数据后要动态添加li>至ul>并实现分页，js文件却达不到想要的分页效果。 （原因：这是由于js脚本文件会在ajax完成请求之前执行
原生javascript分页 html分页与ajax数据请求结合使用 前端js分页
一只京大的博客
10-12 6562
原生javascript分页功能，与后台结合使用ajax请求数据，是目前大多数前后端分离建站使用的分页展示数据的逻辑 使用示例： 效果图： index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g...
jeecg datagrid 每页显示记录数
weixin_33912638的博客
04-20 978
为什么80%的码农都做不了架构师？>>> ...
jeecg框架分页数据加载完成后执行某一段代码的方法
疯小子
05-06 1091
在jeecg框架中datagrid标签可以自动生成数据列表和分页方法非常方便实用。 但是最近遇到了这样一种情况，需要在点击上一页、下一页或者是任意一个可以更改页面的按钮后执行一个方法。 datagrid标签中并没有设置这样可以在数据列表加载完成后执行的属性或方法，只能自己添加，接下来我给大家介绍一下我添加这个方法的过程： 在jeecg中加载数据的ajax被封装在了 jquery.easyui.m...
jQuery实现的分页功能，包括ajax请求，后台数据
wild_cowboy的博客
07-05 5668
一：需求分析 　　1）需要首页，末页功能 　　2）有点击查看上一页，下一页功能 　　3）页码到当前可视页码最后一页刷新页面 二：功能实现思路 　　也是分为三部分处理 　　1）点击首页，末页直接显示第一页或者最后一页内容，当前页面为第1页或者最后一页。隐藏首页或者末页按钮。demo 显示截图 　　首页状态 和 末页状态代码执行结果截图 　　
ajax实现分页操作
蒙悦纳的博客
06-28 1669
利用ajax请求数据的特点，来实现分页操作。
jQuery 移动端ajax请求列表数据，实现点击翻页效果（还有手势往下滑动翻页）。...
weixin_30924087的博客
01-04 840
1 首先是html部分 <div class="content"> 　　<div class="list"></div> //list 是放ajax请求的列表 <input type="hidden" id="pageNum"> //pageNum 为记录当前请求接口数据的页码 　　<div class="m...
promise封装ajax请求
07-28
可以使用 Promise 来封装 AJAX 请求。下面是一个示例： ```javascript function request(url, method, data) { return new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest(); xhr.open...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值