zoukankan      html  css  js  c++  java
  • Java丨springMVC + Ajax 来进行分页

    javaweb 分页技术 实现的方式有很多种,但是小编在网上问了度娘也问了谷老师,得到的答案让小编我不是很满意,so,还是自己写吧!

    在小编的博文中,小编不会上传源码,只会把重要的代码和思路供大家参考!

    如果只想要实现代码的读者们就不要继续观看此文章。

    主题:Javaweb分页技术实现详解

    1、首先我们来解析一下分页实现需要的一些变量有哪些:

    upPage:上一页

    nextPage:下一页

    nowPage:当前的页数

    sumPage:总页数

    list:需要显示的数据

    count:显示的条数

    2、在上面我们知道了需要一些什么参数,那么我们怎么获得这些参数呢?

    1)我们首先从后台加载一次要显示的数据到页面上

    request.setAttribute("list", list);//需要显示在界面的数据

    request.setAttribute("count", list.size());//在界面上显示的当前页条数

    request.setAttribute("nowPage", nowPage);//现在是多少页

    request.setAttribute("sumPage", sumPage);//总页数多少页

     

    2)把第一条中对应的参数在后台传到view层  ,显示如下格式:

    |  姓名  |  年龄  |  班级  |

    |  张山  |  19    |  3班   |

    |  李四  |  20    |  1班   |

    |  王麻子   |  18    |  5班   |

    ----3条------------上一页--1/20--下一页--

    参数对应如下:

    3条:${count}

    1:${nowPage}

    20:${sumPage}

    以上就是我们在分页之前做的准备工作,接下来就是ajax的事情了

    3.设置上一页下一页的点击事件:

    /*

    * 下一页
    */
    $("#nextPage").click(function(){
      //alert("----");
      //判断是否不是最后一页
    if($("#pageNum").html().indexOf($("#sumPage").html())!=-1){
    alert("已经是最后一页了");
    return;
    } else {//不为最后一页就查找下一页的内容
    $.post("next.duanniu",
    {
    page:""+$("#pageNum").html(),
    sumPage:""+$("#sumPage").html()
    },
    function(data,status){//返回状态
    $("#att").empty();//设置tbody的内容为空
    if(status=="success"){
    var jsonData = JSON.parse(data);
    var jsonStr = "";
    var record = 0;
    $.each(jsonData, function(i, item){
    jsonStr+="<tr >"+
    "<td width='150px'>"+item.id+"</td>"+
    "<td>"+item.name +"</td>"+
    "<td>"+item.area +"</td>"+
    "<td>"+item.empower +"</td>"+
    "<td>"+item.belong +"</td>"+
    "<td><span class='state'>"+item.state +"</span></td>"+
    "<td>"+
    "<div class='operation'>"+
    "<a class='edit' href='cardAdminTableShow.duanniu?id="+item.id+"'>"+
    " <span class='btn-edit'></span>直推查看"+
    "</a>"+
    " <a class='edit' href='cardAdminTree.duanniu?id="+item.id+"'>"+
    " <span class='btn-edit'></span>树状图"+
    " </a>"+
    " </div>"+
    "</td>"+
    "</tr>";
    record = i+1;
    });
    $("#att").empty().append(jsonStr);
    $("#recordCount").html("共"+record+"条");
    //设置页数
    $("#pageNum").html(""+(parseInt($("#pageNum").html())+1));
    }
    });
    }
    });

    /*
    * 上一页
    */
    $("#upPage").click(function(){
    //判断是否不是最后一页
    if(parseInt($("#pageNum").html())-1==0){
    alert("已经是第一页了");
    return;
    } else {//不为最后一页就查找下一页的内容
    $.post("next.duanniu",
    {
    page:""+parseInt($("#pageNum").html())-2,
    sumPage:""+$("#sumPage").html()
    },
    function(data,status){//返回状态
    $("#att").empty();//设置tbody的内容为空
    if(status=="success"){
    var jsonData = JSON.parse(data);
    var jsonStr = "";
    var record = 0;
    $.each(jsonData, function(i, item){
    //alert("--"+jsonData);
    jsonStr+="<tr >"+
    "<td width='150px'>"+item.id+"</td>"+
    "<td>"+item.name +"</td>"+
    "<td>"+item.area +"</td>"+
    "<td>"+item.empower +"</td>"+
    "<td>"+item.belong +"</td>"+
    "<td><span class='state'>"+item.state +"</span></td>"+
    "<td>"+
    "<div class='operation'>"+
    "<a class='edit' href='cardAdminTableShow.duanniu?id="+item.id+"'>"+
    " <span class='btn-edit'></span>直推查看"+
    "</a>"+
    " <a class='edit' href='cardAdminTree.duanniu?id="+item.id+"'>"+
    " <span class='btn-edit'></span>树状图"+
    " </a>"+
    " </div>"+
    "</td>"+
    "</tr>";
    record = i+1;
    });
    $("#att").empty().append(jsonStr);
    $("#recordCount").html("共"+record+"条");
    //设置页数
    $("#pageNum").html(""+(parseInt($("#pageNum").html())-1));
    }
    });
    }
    });

     

    备注:以上由于时间关系,内容不完善,所以设置了密码,还请见谅!

    =======祝各位读者生活愉快======

     

  • 相关阅读:
    C++中重载、重定义、重写概念辨析
    虚函数,抽象函数
    取出一个int的每一位,用算法
    Typedef和define
    枚举
    基于 ThinkPHP 3.2.3 的页面静态化功能的实现
    骑行在华盛顿 针对320万次共享单车骑行数据的分析
    骑行在华盛顿 针对320万次共享单车骑行数据的分析
    分析了10个垂直行业后,告诉你大数据应用面临哪些挑战
    分析了10个垂直行业后,告诉你大数据应用面临哪些挑战
  • 原文地址:https://www.cnblogs.com/haojieli/p/5572204.html
Copyright © 2011-2022 走看看