ajax分页

Loong_T 发布于2019-08-22 11:19 / 2859人阅读

摘要：分页分页保存当前页调用第几页每页条数审批状态审批类型审批类型费用类别每页显示个数当前状态没有费用单当前页数，每页显示个数，总条数查询失败提交异常遍历列表每页开始的序列号为每个显示个数查看查看修改，查看，删除修改查看删除

1.css

/*分页*/
#page {
    width: 1250px;
    text-align: center;
    font-size: 16px;
    margin-top: 20px;
}

#page ul {
    overflow: hidden;
    display: inline-block;
}
ul, li {
    list-style: none;
}
#page ul li {
    width: 34px;
    height: 34px;
    background-color: #f1f1f1;
    margin: 0 10px;
    line-height: 34px;
    ;
    float: left;
    position: relative;
    border-radius: 100%;
    cursor: pointer;
}

#page .prve,
#page .next {
    width: 34px;
    height: 34px;
    background-color: #f1f1f1;
    margin: 0 10px;
    float: left;
    position: relative;
    border-radius: 100%;
    cursor: pointer;
}

#page .prve i,
#page .next i {
    width: 9px;
    height: 17px;
    display: block;
    background: url(../img/page.png) no-repeat;
    position: absolute;
    top: 8.5px;
    left: 12.5px;
}

#page .prve i {
    background-position: 0 -25px;
}

#page .next i {
    background-position: -17px -25px
}

#page li.active {
    background-color: #19a9d5;
    color: #fff;
}
/*/分页*/

2.js

// 保存 当前页
var PAGING=1;
function pages(a,b,c){
    var par=$("#page");
    par.empty();
    var yesum=Math.ceil(c/b);
    var html="";
    html+="";
    if(yesum<=5){
        for(var i=1;i<=yesum;i++){
            html+=""+i+"";
        };
    };
    if(yesum>5){
        html+="";
        if(a<=3){
            for(var i=1;i<=4;i++){
                html+=""+i+"";
            };
            html+="...";
        }else if(a>=(yesum-3)){
            html+="...";
            for(var i=3;i>=0;i--){
                html+=""+(yesum-i)+"";
            };
        }else{
            html+="...";
            for(var i=0;i<4;i++){
                html+=""+(a+i)+"";
            };
            html+="...";
        }
        html+="";
    };
    html+="";
    par.append(html);
    par.find(".a"+a).addClass("active").removeClass("num");
};
$("#page").on("click",".num",function(){
    ajaxPage(parseInt($(this).html()))
});
$("#page").on("click",".next",function(){
    var n = PAGING+1;
    if(n > $(".num:last").html()) return;
    ajaxPage(n)
});
$("#page").on("click",".prve",function(){
    var n = PAGING-1;
    if(n <= 0) return;
    ajaxPage(n);
})

3.调用

ajaxPage(PAGING);
function ajaxPage(page){
    /*page_now 第几页
    rows    每页条数
    status 审批状态
    reimbur_type 审批类型
    is_connect 审批类型
    type_id 费用类别*/
    PAGING=page;
    var sum=10; // 每页显示个数
    $.ajax({
        type:"post",
        url: "{:U("ReimburApi/myReimbur")}",
        data:{
            "page_now":page,
            "rows":sum,
        },
        dataType:"json",
        success:function(data){
            //debugger
            console.log(data);
            //return false;
            if(data.status==0){
                if (data.data.lists.length==0) {
                    $(".biaoge tbody").html("当前状态没有费用单！");
                } else{
                    setFydList(data.data.lists,data.data.total_num,PAGING);
                    pages(page,sum,data.data.total_num); // 当前页数，每页显示个数，总条数
                }
            }else{
                console.log("查询失败！")
                console.log(data.msg)
            }
            
        },
        error:function(data){
            console.log("提交异常");
        }
    });
}    

//遍历列表
function setFydList(data,count,page){
    startNum = count - (page - 1) * 10; // 每页开始的序列号,5为每个显示个数
    $(".biaoge tbody").empty();
    for (var i=0;i";
        html += "    "+data[i].admin_name+"";
        html += "    "+data[i].reimbur_type+"";
        html += "    "+data[i].item_connect+"";
        html += "    "+data[i].sale_name+"";
        html += "    "+data[i].type_title+"";
        html += "    "+data[i].total_amount+"";
        html += "    "+data[i].describe+"";
        html += "    "+data[i].current_status+"";
        html += "    "+data[i].rec_update_time+"";
        html += "    "+data[i].remark+"";
        html += "    ";
        if (data[i].caozuo_status==1) {
                //查看
            html += "        查看";
        } else if (data[i].caozuo_status==3){
                //修改，查看，删除
            html += "        修改";
            html += "        查看";
            html += "        删除";    
        }
        html += "    ";
        html += "";
        $(".biaoge tbody").append(html);
    }
}

云服务器 GPU云服务器无刷新ajax分页 ajax分页查询 ajax实现分页 ajax异步分页

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92165.html

一步步实现thinkphp上的ajax无刷新分页

摘要：信息列表循环赋值分页信息部分这一步是实现无刷新分页的重点，用到了的通信，通过与数据库的交互，将获取到的数据写到模板中，替换掉之前的数据集，达到分页的目的。前言 thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面，这种翻页的用户体验显然是不太理想的，我们希望每次翻页只刷新我们想要的数据集部分的数据，这样我们很容易想到ajax异步通信，用ajax与数据库（本人在开发过程中使用...

张迁 2019-06-27 14:04 评论0 收藏0
ajax分页

摘要：一个比较简单，但是需要多一个页面的分页方法首先请求传输数据到后台进行处理与一般的写法没有什么不同，只是在成功返回的时候对输出的进行了覆盖，然后调用一个方法，方法在后面。一个比较简单，但是需要多一个页面的ajax分页方法首先请求传输数据到后台进行处理 $(function(){ $(.btn).click(function(){ var phone = $(#...

mindwind 2019-06-27 14:55 评论0 收藏0
jQuery+Ajax+PHP无刷新分页

摘要：下载演示地址本文使用，通过实例讲解如何实现无刷新分页效果。当数据完全加载完毕后，调用函数生成分页，也可用程序来实现分页。页面可在分页的属性中获取。下载演示地址：http://www.erdangjiade.com/js...本文使用jQuery+Ajax+PHP+Mysql，通过实例讲解如何实现Ajax无刷新分页效果。 #ul_lists以列表的形式展现数据，信...

wangzy2019 2019-08-21 11:38 评论0 收藏0
jQuery+Ajax+PHP无刷新分页

摘要：下载演示地址本文使用，通过实例讲解如何实现无刷新分页效果。当数据完全加载完毕后，调用函数生成分页，也可用程序来实现分页。页面可在分页的属性中获取。下载演示地址：http://www.erdangjiade.com/js...本文使用jQuery+Ajax+PHP+Mysql，通过实例讲解如何实现Ajax无刷新分页效果。 #ul_lists以列表的形式展现数据，信...

Kosmos 2019-06-27 15:43 评论0 收藏0
jQuery+Ajax+PHP无刷新分页

摘要：下载演示地址本文使用，通过实例讲解如何实现无刷新分页效果。当数据完全加载完毕后，调用函数生成分页，也可用程序来实现分页。页面可在分页的属性中获取。下载演示地址：http://www.erdangjiade.com/js...本文使用jQuery+Ajax+PHP+Mysql，通过实例讲解如何实现Ajax无刷新分页效果。 #ul_lists以列表的形式展现数据，信...

lauren_liuling 2019-08-14 17:46 评论0 收藏0
jQuery+Ajax+PHP无刷新分页

摘要：下载演示地址本文使用，通过实例讲解如何实现无刷新分页效果。当数据完全加载完毕后，调用函数生成分页，也可用程序来实现分页。页面可在分页的属性中获取。下载演示地址：http://www.erdangjiade.com/js...本文使用jQuery+Ajax+PHP+Mysql，通过实例讲解如何实现Ajax无刷新分页效果。 #ul_lists以列表的形式展现数据，信...

mengbo 2019-08-01 16:30 评论0 收藏0