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

╰半橙微兮° 2022-04-10 13:31 306阅读 0赞

## 设计思路： ##

数据分页在写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][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，然后下面才是对应的表格，效果图就放这吧，，

![20190111105402375.gif][]

<%@ 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>

[https_pan.baidu.com_s_1SmfFkp4LYjVb0HGVL7kr0A_list_path_2F]: https://pan.baidu.com/s/1SmfFkp4LYjVb0HGVL7kr0A#list/path=%2F
[20190111105402375.gif]: /images/20220328/0f9bb49bc61742f7866188870eb7f7fc.png