Ajax分页--适合初学者学习

最新推荐文章于 2022-03-29 08:46:35 发布

dashabenmao

最新推荐文章于 2022-03-29 08:46:35 发布

阅读量107

点赞数

分类专栏： JavaScript 文章标签： Ajax Bean DAO XML IE

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

分页算法;

public class AjaxPage {
	//总记录数
	private int totalRows;
	//当前页
	private int currpage;
	//分页单位
	private int pagesize;
	//总页数
	private int totalPages;
	//每页数据的开始下标
	private int startRow;

	public AjaxPage(int totalRows,int currpage, int pagesize){
		this.totalRows =(totalRows);
		this.setCurrpage(currpage);
		this.setPagesize(pagesize);
	}


	public int getTotalRows() {
		return totalRows;
	}
	public void setTotalRows(int totalRows) {
		this.totalRows = totalRows;
	}
	public int getCurrpage() {
		return currpage;
	}
	public void setCurrpage(int currpage) {
		this.currpage = currpage;
	}
	public int getPagesize() {
		return pagesize;
	}
	public void setPagesize(int pagesize) {
		this.pagesize = pagesize;
	}
	public int getTotalPages() {
		//调用设置总页数方法
		this.setTotalPages();
		return totalPages;
	}
	//设置总页数
	public void setTotalPages() {

		this.totalPages = this.getTotalRows()/this.getPagesize();
	}
	public int getStartRow() {
		//调用设置行号方法
		this.setStartRow();
		return startRow;
	}
	//设置每页的起始行号
	public void setStartRow(){
		this.startRow = (this.getCurrpage()-1)*this.getPagesize();
	}
	public void setStartRow(int startRow) {
		this.startRow = startRow;
	}

JSP页面采用ajax解析XML

<script type="text/javascript">
	var XMLHttpReq;
    function createXMLHttpRequest() {
		if(window.XMLHttpRequest) { //Mozilla 浏览器
			XMLHttpReq = new XMLHttpRequest();
		}
		else if (window.ActiveXObject) { // IE浏览器
			try {
				XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try {
					XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {}
			}
		}
	}
	//主调函数,以当前页作为参数
	function AjaxTest(currpage){
		createXMLHttpRequest();
		XMLHttpReq.open("post","AjaxServlet.do?currpage="+currpage,true);
		XMLHttpReq.onreadystatechange= callback;
		XMLHttpReq.send(null);

	}
	//回调函数
		function callback(){
			if(XMLHttpReq.readyState!=4){
				//div.innerHTML = "<font color='red'>数据加载中...</font>"	;		
			}
			else{
				if(XMLHttpReq.status == 200){
					var xmlDOM = XMLHttpReq.responseXML; 
					parse(xmlDOM);
				}
			}
		}
		function parse(xmlDOM){
			var person=xmlDOM.getElementsByTagName("person");
			var page = xmlDOM.getElementsByTagName("page")[0];
			var currpage = page.getElementsByTagName("currpage")[0].firstChild.data;
			var pagecount = page.getElementsByTagName("pagecount")[0].firstChild.data;
			var prevpagehtml; 
			var nextpagehtml; 
		if((currpage-0)<=1){
				prevpagehtml = "<a>上一页</a>";
			}else{
				prevpagehtml = "<a onclick='AjaxTest("+(currpage-1)+");' href='javascript:void(0);'>上一页</a>";
			}
			if((currpage-0)<(pagecount-0)){
				nextpagehtml = "<a onclick='AjaxTest("+(currpage-0+1)+");' href='javascript:void(0);'>下一页</a>";
			}else{
				nextpagehtml = "<a>下一页</a>";
			}

			var html = "<table><tr><td width='80'>编号</td><td width='100'>姓名</td><td width='80'>年龄</td><td width='80'>班级</td></tr>";

  			for(i=0;i<person.length;i++){
  					html = html+ "<tr><td>"+person[i].getElementsByTagName("sid")[0].firstChild.data+"</td><td>"+person[i].getElementsByTagName("sname")[0].firstChild.data+"</td><td>"+person[i].getElementsByTagName("sage")[0].firstChild.data+"</td><td>"+person[i].getElementsByTagName("sclass")[0].firstChild.data+"</td></tr>";
  			}
  			html = html + "<tr><td width='50'>"+prevpagehtml+"</td><td width='80'>当前第"+currpage+"页</td><td width='100'>共"+pagecount+"页</td><td width='80'>"+nextpagehtml+"</td></tr>";
  			html = html+"</table>";
  			document.getElementById("div").innerHTML=html;
		}

	</script>
  </head>

  <body onload="AjaxTest(1);">
 	 <div style="text-align: center">

	    <div id="div"> </div>

    </div>

PS:虽然很古老，但是我个人觉得初学者了解了解也是很有帮助的。

action内容:

public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		AjaxDao dao=new AjaxDaoImp();
		//当前页
		int currpage = Integer.parseInt(request.getParameter("currpage")==null?"1":request.getParameter("currpage"));
		//总的记录数
		int total =dao.getResultCount();
		int pagesize=1000;
		//Page类对象
		AjaxPage page=new AjaxPage(total, currpage, pagesize);
		//用于返回给前台页面的XML文档
		StringBuffer xmlDOM = new StringBuffer();
		//取出所有信息
//		System.out.println("开始1"+page.getCurrpage());
//		System.out.println("开始2"+(page.getCurrpage()-1));
//		
		System.out.println("开始3"+(page.getCurrpage()-1)*page.getPagesize());
System.out.println("当前第几页"+page.getCurrpage());
		List ajaxList=dao.findAll((page.getCurrpage()-1)*page.getPagesize(), page.getPagesize());
		//添加XML
		response.setContentType("text/xml; charset=UTF-8");
		response.setHeader("Cache-Control","no-cache");
		xmlDOM.append("<?xml version='1.0' encoding='UTF-8' standalone='no' ?>" );
		xmlDOM.append("<root>");
		//添加数据库查询出来的数据
		for(int i=0;i<ajaxList.size();i++){
			Pojo bean=(Pojo) ajaxList.get(i);
			xmlDOM.append("<person>");
			xmlDOM.append("<sid>"+bean.getSid()+"</sid>");
			xmlDOM.append("<sname>"+bean.getSname()+"</sname>");
			xmlDOM.append("<sage>"+bean.getSname()+"</sage>");
			xmlDOM.append("<sclass>"+bean.getSclass()+"</sclass>");
			xmlDOM.append("</person>");
		}
		//添加分页信息
		xmlDOM.append("<page>");
		xmlDOM.append("<currpage>"+page.getCurrpage()+"</currpage>");
		xmlDOM.append("<pagecount>"+page.getTotalPages()+"</pagecount>");
		xmlDOM.append("</page>");
		xmlDOM.append("</root>");
		//调用打印方法
		this.print(request, response, xmlDOM.toString());
	}
	private void print(HttpServletRequest request, HttpServletResponse response,String xmlDOM) throws IOException{
		response.setCharacterEncoding("gb2312");
		response.setContentType("text/xml");
		PrintWriter out = response.getWriter();
		out.print(xmlDOM);
		out.close();
	}

}

以上是一个技术ajax的无刷新分页。希望对初学者有些帮助，在下也是个初学者，刚踏入工作不久，希望各位高手看到我的代码不要嘲讽。写法是参照网上的一个demo而写。
大家学习吧。

dashabenmao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax分页--适合初学者学习

分页算法;[code="java"]public class AjaxPage { //总记录数 private int totalRows; //当前页 private int currpage; //分页单位 private int pagesize; //总页数 private int totalPages; //每页数据的开始下标 private...
复制链接

扫一扫

专栏目录