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(KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲pageNum").html(…("#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+=""+
  ""+item.id+""+
  ""+item.name +""+
  ""+item.area +""+
  ""+item.empower +""+
  ""+item.belong +""+
  ""+item.state +""+
  ""+
  ""+
  ""+
  " 直推查看"+
  ""+
  " "+
  " 树状图"+
  " "+
  " "+
  ""+
  "";
  record = i+1;
  });
  $("#att").empty().append(jsonStr);
  $("#recordCount").html("共"+record+"条");
  //设置页数
  KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲pageNum").html(…("#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+=""+
  ""+item.id+""+
  ""+item.name +""+
  ""+item.area +""+
  ""+item.empower +""+
  ""+item.belong +""+
  ""+item.state +""+
  ""+
  ""+
  ""+
  " 直推查看"+
  ""+
  " "+
  " 树状图"+
  " "+
  " "+
  ""+
  "";
  record = i+1;
  });
  $("#att").empty().append(jsonStr);
  $("#recordCount").html("共"+record+"条");
  //设置页数
  KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲pageNum").html(…("#pageNum").html())-1));
  }
  });
  }
  });

备注：以上由于时间关系，很久的博文内容不完善，还请见谅！希望能帮到读者。

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