ajax - jquery 点击上一页、下一页、末页如何跳转

问题描述

问 题

写了一个新闻页面，每个页面从接口获取9条数据展示，页数是动态生成的，现在只做了点击页数获取相应页数据渲染到页面，上一页、下一页、末页不太清楚怎么做，我的疑问在于，如果点击上一页或下一页，如何知道当前页面的索引呢？请有经验的同学指教
html:

<!-- 主体内容 -->
<div class="news-content">
<div class="news-content-title">
    <div class="line horizon"></div>
    <div class="title-name horizon">新闻资讯</div>
    <div class="line horizon"></div>
</div>
<div class="news-wrapper">
   
</div>

<!-- 页数 -->

<ul id="page-wrapper">
 
</ul>


js:

 $(document).ready(function(){
 // 加载首页新闻
 getSubnews();
 // 加载某页新闻
 $("#page-wrapper").delegate(".pager", "click", function(){
    var no = $(this).index()-1;
    var pagenum = (no - 1)*9;
    // alert(pagenum);
    goPage(pagenum);

 })
 // ！！！这里写的有问题，要写加载下一页的代码的
var currentPage = 1;
$("li .page-next").click(function(){
alert();
    currentPage++;
  goPage(currentPage);
 })

 // 定义获取首页新闻函数(跳转到该二级页面时或点击首页时加载)
 function getSubnews(){

    $.ajax({
        url:"http://123.56.196.192:2000/syxa/news-consult/2/0/9",
        type:"GET",
        // data: ,
        error:function(){
            // console.log(error);
        },
        success:function(data){
            var html="";
            // count为总页数
            // alert(data.count);
            //产生的页数
            var pageno = Math.ceil(data.count/9);
            // alert(pageno);
            var html = "";
            for(var i=1; i<= pageno; i++){
                html += "<li class=\"pager\">" + i +        "</li>";                    
                   // $(html).insertBefore(".page-next");
            }

              html = "<li class=\"page-first\">"+"首页"+"</li>"
                 + "<li class=\"page-prev\">"+"上一页"+"</li>"
                 +html
                 +"<li class=\"page-next\">"+"下一页"+"</li>"
                 +"<li class=\"page-last\">"+"末页"+"</li>";
            // $(html).insertBefore(".page-next");
            $("#page-wrapper").html(html);
            // 加载首页新闻9条
            // alert(data.data[0].title);
            var htmlString="";
            $.each(data.data,function(i,item){

                // alert(i);
                htmlString += " <div class=\"news-content-item\">"
                             +"<div class=\"news-content-item-title\">"
                             +"<span class=\"item-title\">"+data.data[i].title+"</span>"
                             +"<span class=\"item-date\">"+data.data[i].create_time+"</span>"
                +"<span class=\"item-location\"><i class=\"fa fa-map-marker\" ></i>"+"北京"+"</span></div>"    
    
                +"<div class=\"news-content-item-text\">"
                +"<a href=\" \">"+"<img class=\"news-img\" src="+data.data[i].top_img+"></a>"
                +"<a href=\" \"><div class=\"news-text\">" +data.data[i].subtitle+"</div></a></div>"
                +"<a href=\" \" class=\"news-more\">"+"了解更多"+"</a></div> ";

                // $(htmlString).insertAfter(".news-content-title");
                // console.info(htmlString);
                                   
            })
            $(".news-wrapper").html(htmlString);
        }

    })

  }

 // 定义点击页数跳转
 function goPage(page){
    // page=(page-1);
    $.ajax({
        url:"http://123.56.196.192:2000/syxa/news-consult/2/"+page+"/9",
        type:"GET",
        data:{page:page},
        error:function(){
            console.log(error);
        },
        success:function(data){
            
            // 刷新页数
            console.info(data);
            var pageno = Math.ceil(data.count/9);
            // alert(pageno);
            var html = "";
            for(var i=1; i<= pageno; i++){
                html += "<li class=\"pager\">" + i + "</li>";                    
                   // $(html).insertBefore(".page-next");
            }
            html = "<li class=\"page-first\">"+"首页"+"</li>"
                 + "<li class=\"page-prev\">"+"上一页"+"</li>"
                 +html
                 +"<li class=\"page-next\">"+"下一页"+"</li>"
                 +"<li class=\"page-last\">"+"末页"+"</li>";
            // $(html).insertBefore(".page-next");
            $("#page-wrapper").html(html);

            // 生成内容
            var htmlString="";
             $.each(data.data,function(i,item){

                // alert(i);
                htmlString += "<div class=\"news-content-item\">"
                             +"<div class=\"news-content-item-title\">"
                             +"<span class=\"item-title\">"+data.data[i].title+"</span>"
                             +"<span class=\"item-date\">"+data.data[i].create_time+"</span>"
                +"<span class=\"item-location\"><i class=\"fa fa-map-marker\" ></i>"+"北京"+"</span></div>"            
                +"<div class=\"news-content-item-text\">"
                +"<a href=\" \">"+"<img class=\"news-img\" src="+data.data[i].top_img+"></a>"
                +"<a href=\" \"><div class=\"news-text\">" +data.data[i].subtitle+"</div></a></div>"
                +"<a href=\" \" class=\"news-more\">"+"了解更多"+"</a></div> ";

              // $(htmlString).insertAfter(".news-content-title");
            })
             $(".news-wrapper").html(htmlString);
        }

    })

}
// 跳转某页函数结束

解决方案

分页原理基本就是
每页数据数 showNum
数据总数 dataNum
总页数 Math.ceil(dataNum / showNum)
当前页 page
上一页 page - 1
下一页 page + 1
当前页数据开始位置 (page - 1) * showNum + 1
当前页数据结束位置 page * showNum
第一页跟最后一页的数据单独判断请求.
所以你需要什么功能就相应的写就可以了

下面摘要一个以前做的例子局部:

var variable = {
    areaInfo: '', // 数据集
    showNum: 5 // 每页显示数
}

// @nowPage 当前页
// @showNum 每页显示数
function page(nowPage,showNum){
    nowPage = (nowPage == null) ? 1 : nowPage; // 当前页
    if (showNum != null) variable.showNum = showNum; // 每页显示数

    var zNum = variable.areaInfo.length; // 总数据数
    var zPage = Math.ceil(zNum / variable.showNum); // 总页数
    var start = (nowPage - 1) * variable.showNum; // 数据开始点
    var HTML = '', // 数据HTML
        PAGE = ''; // 页码HTML
    for (var i = start ; i < nowPage * variable.showNum && i < zNum; i++){
        HTML += '<ul><li id="'+ i +'">'+ variable.areaInfo[i].title +'</li><li>地址：'+ variable.areaInfo[i].address +'</li><li>面积：'+ variable.areaInfo[i].area +'</li><li>等级：'+ variable.areaInfo[i].level +'星</li>';
        if (variable.area == 'C1'){
            if (variable.areaInfo[i].c1_cost == null || variable.areaInfo[i].c1_cost == 0) variable.areaInfo[i].c1_cost = '3830.00';
        }else {
            if (variable.areaInfo[i].c2_cost == null || variable.areaInfo[i].c2_cost == 0) variable.areaInfo[i].c2_cost = '3030.00';
        }
        HTML += '<li class="__CONFIRM"><a href="javascript:;" onclick="set_place('+ variable.areaInfo[i].id +')" style="color:#FFFFFF">确定</a></li><li style="position:absolute;top:20px;right:25px;padding:2px 5px;">';
        HTML += '<a href="/ds/Home/Student/place_map/license/'+ variable.area +'/id/'+ variable.areaInfo[i].id +'" style="color:#999">查看位置</a></li></ul>';
    }
    $('.AreaInfo').html(HTML);

    if (nowPage > 1) PAGE += '<span onclick="page(' + (nowPage-1) + ')">上一页</span>';
    for (i = 1 ; i <= zPage ; i++){
        if (nowPage == i){
            PAGE += '<span onclick="page('+ i +')" class="nowPage">'+ i +'</span>';
        }else{
            PAGE += '<span onclick="page('+ i +')">'+ i +'</span>';
        }
    }
    if (nowPage < zPage) PAGE += '<span onclick="page(' + (nowPage+1) + ')">下一页</span>';
    $('.next_page').html(PAGE);
}

这篇关于ajax - jquery 点击上一页、下一页、末页如何跳转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！