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

设计思路:

       数据分页在写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>

 

 

 

  • 2
    点赞
  • 12
    收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论 1

打赏作者

HuyCui

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值