jsp分页：使用Ajax+servlet+json实现分页

最新推荐文章于 2022-04-28 19:04:07 发布

置顶 8F89__

最新推荐文章于 2022-04-28 19:04:07 发布

阅读量2.7k

点赞数 2

分类专栏： Java web

本文链接：https://blog.csdn.net/Horizonhui/article/details/86288831

版权

Java web 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

设计思路：

数据分页在写web项目时是很重要的一个应用，通常找到的一些比如jquery的一些插件通常是所谓的“假分页”，我们说的分页是要点击某一页时，向后台提交请求得到那一页的数据，而插件通常没有调用后台，只是将全部数据都拿到之后通过css配合js实现的数据分开显示，这种分页在加载时还是请求了全部的数据。

我的思路：首先要从数据库中得到你要显示的所有数据的条数，设计好你要每页显示多少条数据，根据这两项，就可以确定下来生成多少个页码的按钮，包括“上一页”、“下一页”，页面加载时要将第一页数据显示。至于怎么显示，显示每一页时，点击页码的时候得到要跳转的页码，调用生成第几页的函数，通过Ajax请求servlet，将需要显示的数据放到list当中以json的形式传回jsp页面，然后用js生成对应的表格即可。“上一页”的实现，定义一个js全局变量用来保存当前页码，然后显示的时候同样去调用js函数进而调用Ajax即可，“下一页”同理。

代码：

在代码当中，当时只为了试一下分页能不能成功，我没有调用数据库，建了一个TestA这样一个类来模拟数据，在servlet当中，建立一个list来保存TestA这个类的对象，比如我请求第一页，第一页数据有5个的话，我就在list中放入id为0-4的五个数据然后返回，一次类推，在实际有数据库时，返回的list就是从数据库中读出的数据，同样的道理。

需要的jar包，都时Java操作json的包，在我的网盘可以找得到

https://pan.baidu.com/s/1SmfFkp4LYjVb0HGVL7kr0A#list/path=%2F

TestA类

这个类用来模拟一个bean，之后在list当中存的就是它的一个对象，请求第一页，第一页数据有5个的话，我就在list中放入id为0-4的五个数据。

package cn.test;

public class TestA {
	private int id;
	private String name;
	
	public TestA() {
		super();
	}
	public TestA(int id, String name) {
		super();
		this.id = id;
		this.name = name;
	}
	@Override
	public String toString() {
		return "TestA [id=" + id + ", name=" + name + "]";
	}
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	
}

servlet:

servlet当中主要是得到list，将list封装成json数组，然后返回。当然这里得到list也可以是通过调用Dao层的方法从数据库中获得，此处我没有调用数据库，用了一个for循环来模拟，循环变量的取值当然就与当前页和每页多少数据有关，至于怎么计算，应该是挺简单的。。。

package cn.test;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;



import net.sf.json.JSONArray;

/**
 * Servlet implementation class JsonTest
 */
public class JsonTest extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public JsonTest() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		String cpage = request.getParameter("currpage");
		String limit = request.getParameter("limit");
		System.out.println("-------"+cpage);
		List<TestA> list = new ArrayList<TestA>();
		for(int i = (Integer.parseInt(cpage)-1)*Integer.parseInt(limit);
 i < (Integer.parseInt(cpage)-1)*Integer.parseInt(limit)+Integer.parseInt(limit); i++) {
			TestA a = new TestA(i,"test"+i);
			list.add(a);
		}
		JSONArray jarray = JSONArray.fromObject(list);
		
	    response.getWriter().write(jarray.toString());
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

jsp：

在jsp中主要有两个函数，一个变量。

先说变量吧，我在js中定义了一个全局变量叫currentPage来记录当前是第几页，在后面的代码中，会经常看到这个变量。

createPage函数，有三个参数，第一个currPage是当前页，第二个limit是每页限制多少数据，第三个是总的数据条数。前两个数据都是要传递到servlet当中的，然后使用jquery 的方法解析json，把要生成的表格先放到一个html这个列表中，通过js的方法，可以将整个表格添加到一个div中。

createbutton函数是用来生成页码的，我这里用了button来模拟，偷了个懒，其实实际应用中你可以使用链接或是span，道理都是一样的。我把第0个和最后一个当作时“上一页”和“下一页”的按钮，生成button时要设置他的onclick事件，当然就是调用上面的createPage函数，然后将currentPage修改，在生成上一页和下一页的按钮时，注意它的click事件里要判断当前时第几页，注意到这些，其实也就没什么了。

细节其实就是不要忘记修改当前页和判断首页和尾页（写到这突然发现没写首页和尾页，不过博客里就先这样吧，其实首页和尾页与普通的页码是一样的）。

当然还有一些东西没做，比如页码多了之后，将后面的隐藏；直接跳转到某一页；点击到某一页的时候将本页的按钮变颜色等等，日后有空加上吧。。。

我在jsp里还输出了一下得到的json，然后下面才是对应的表格，效果图就放这吧，，

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<title>Insert title here</title>
<link href="default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>

<script type="text/javascript">
	var currentPage;
	
	$(document).ready(function(){
		createPage(1,5,20);
		currentPage = 1;
		createbutton(5);
	});
	function createPage(currPage, limit, total){
		var html = [], showNum = limit;
		if (total - (currPage * limit) < 0) showNum = total - ((currPage - 1) * limit);
		html.push(' <table class="table table-hover table-bordered" cellspacing="0" width="100%">');
        html.push(' <thead><tr><th style="font-size: 20px">ID</th><th style="font-size: 20px">标题</th></tr></thead><tbody>');
        console.log("ajax");
        
	    $.ajax({
	        url : "${pageContext.request.contextPath}/JsonTest", 
	        dataTpye : "json",
	        data : {
	           "currpage":currPage,
	           "limit":limit
	        }, 
	        type : "post",
	        success : function(msg) {
	        	$("#showjson").html(msg);
	            var data = jQuery.parseJSON(msg);
	            if (data.length>0) {
                    for (var i = 0; i < showNum; i++) {
                        html.push('<tr><td>' + data[i].id + '</td>');
                        html.push('<td>' + data[i].name + '</td>');
                        html.push('</tr>');
                    }
                }
                html.push('</tbody></table>');
                var mainObj = $('#list');
                mainObj.empty();
                mainObj.html(html.join(''));
	           
				/* for(x in parsedJson){
					$("#show").html(parsedJson[x].id+"----"+parsedJson[x].name);
				} */
	        },
	        error:function(){  //请求失败的回调方法
	        	alert("请求失败，请重试");
	        }
	    });
	}
	function createbutton(total) {
	    var inp;
	    for (var i = 0; i <= total; i++) {
	        if (i == total) {
	            inp = document.createElement("input");
	            inp.type = "button";
	            inp.value = "下一页";
	            inp.id = "nextpage";
	            inp.onclick = function() {
	                if (Number(currentPage) != total - 1) {
	                    createPage(Number(currentPage) + 1, 5, 20);
	                    currentPage = Number(currentPage) + 1;
	                    console.log(currentPage);
	                }

	            };
	        } else if (i == 0) {
	            inp = document.createElement("input");
	            inp.type = "button";
	            inp.value = "上一页";
	            inp.id = "nextpage";
	            inp.onclick = function() {
	                if (Number(currentPage) != 1) {
	                    createPage(Number(currentPage) - 1, 5, 20);
	                    currentPage = Number(currentPage) - 1;
	                    console.log(currentPage);
	                }

	            };
	        } else {
	            inp = document.createElement("input");
	            inp.type = "button";
	            inp.value = i;
	            inp.id = "page" + i;
	            inp.onclick = function() {
	                console.log($(this).val());
	                currentPage = $(this).val();
	                createPage($(this).val(), 5, 20);
	                console.log(currentPage);
	            };
	        }

	        document.getElementById("pages").appendChild(inp);
	    }


	}
	

</script>
</head>
<body>

<p id="showjson"></p>
<hr>
<p id="show"></p>


<div id="list">
	
</div>
<hr>
<br><br><br><br><br>
<div style="float:left;height:30;width: 20%" id="pages">
</div>



</body>
</html>

8F89__

关注

2
点赞
踩
19

收藏

觉得还不错? 一键收藏
1
评论
jsp分页：使用Ajax+servlet+json实现分页

设计思路：数据分页在写web项目时是很重要的一个应用，通常找到的一些比如jquery的一些插件通常是所谓的“假分页”，我们说的分页是要点击某一页时，向后台提交请求得到那一页的数据，而插件通常没有调用后台，只是将全部数据都拿到之后通过css配合js实现的数据分开显示，这种分页在加载时还是请求了全部的数据。我的思路：首先要从数据库中得到你要显示的所有数据的条数，设计...
复制链接

扫一扫

专栏目录