分页技术,小白也能看懂(从后台传json到前台解析显示)

这是一篇我在初学习过程中，遇到的动态数据分页显示的问题，前台采用Ajax传给后台，后台在访问数据库取出分页数据再转换为json格式传递给前台，前台再解析显示到表格中。在此写出我在做的过程中遇到的问题，可以让其他人少走弯路。

前台方面会用到分页的插件，这是传送地址，http://www.jq22.com/jquery-info15943，下载下来，这插件是没有数据交互的，我们要做的就是把数据从数据库取出来，转换成json再传给js。

然后开始，然后把下载下来的插件里面的文件都复制到项目里，就像这样

 

然后开始写后台代码，这个就是主要的后台处理数据并传json给前台。

index实体类，list存放的是从数据库得到的是分页数据集。

public class index {
    //已知数据
	private int pageNum;//当前页
	private int pageSize;//每页显示的数据条数
	private int totalRecord;//总记录条数
	
	private int totalPage;//总页数
	/*
	 * 开始索引，也就是我们在数据库中要从第几行数据开始拿，有了
	 * 	startIndex和pageSize,就知道了limit语句的两个数据，
	 * 就能获得每页需要显示的数据了;
	 */
	private int startIndex;
	
	private List<Logintimes> list;
	
	
	public index(int pageNum,int pageSize,int totalRecord){
	this.pageNum=pageNum;
	this.pageSize=pageSize;
	this.totalRecord=totalRecord;
	
	if(totalRecord%pageSize==0){
		this.totalPage=totalRecord/pageSize;
	}else{
		this.totalPage=totalRecord/pageSize+1;
	}
		this.startIndex=(pageNum-1)*pageSize;
	}


	public index() {
		// TODO Auto-generated constructor stub
	}


	public int getPageNum() {
		return pageNum;
	}


	public void setPageNum(int pageNum) {
		this.pageNum = pageNum;
	}


	public int getPageSize() {
		return pageSize;
	}


	public void setPageSize(int pageSize) {
		this.pageSize = pageSize;
	}


	public int getTotalRecord() {
		return totalRecord;
	}


	public void setTotalRecord(int totalRecord) {
		this.totalRecord = totalRecord;
	}


	public int getTotalPage() {
		return totalPage;
	}


	public void setTotalPage(int totalPage) {
		this.totalPage = totalPage;
	}


	public int getStartIndex() {
		return startIndex;
	}


	public void setStartIndex(int startIndex) {
		this.startIndex = startIndex;
	}


	public List<Logintimes> getList() {
		return list;
	}


	public void setList(List<Logintimes> list) {
		this.list = list;
	}
	
}

这是前台调用的类。那个判断语句if(request.getParameter("pageNum")==null)是用来处理第一次进入页面时需要给页面传的得到的数据库的数据总记录条数。

public String json() {		
		String message="";
		loginMessageDaoImpl dao=new loginMessageDaoImpl();
		List<Logintimes> list=new ArrayList();
		index index;
		JSONArray array=new JSONArray();
		if(request.getParameter("pageNum")==null){
			index=new index(1,15,dao.allSize());
			 JsonConfig config = new JsonConfig();
			 config.setExcludes(new String[]{"person"});//除去person属性
			index.setList(dao.All(index.getStartIndex(), index.getPageSize()));
			array=JSONArray.fromObject(index,config);
			System.out.println("json:"+array.toString());
			request.setAttribute("index", index);
			message="success";
		}else{					
		int pageNum=Integer.parseInt(request.getParameter("pageNum"));
		int totalRecord=Integer.parseInt(request.getParameter("totalRecord"));
		int totalPage=Integer.parseInt(request.getParameter("totalPage"));
        index=new index(pageNum,15,totalRecord);		
        index.setList(dao.All(index.getStartIndex(), index.getPageSize()));
        JsonConfig config = new JsonConfig();
        config.setExcludes(new String[]{"person"});//除去person属性
        array=JSONArray.fromObject(index,config);
		System.out.println("json:"+array.toString());
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setContentType("text/html;charset=UTF-8");
		message=null;
		try {
			response.getWriter().write(array.toString());		
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();				
		}
	
	}
		return message;
	}

 

你的表中如果含有外键，就需要写这两句，这两句的作用就是在转换json时除去这个外键属性，否则在转换的时候会报错。如果你的表中没有外键，就须把这两句删除。

JsonConfig config = new JsonConfig();
config.setExcludes(new String[]{"person"});

 

 

前台方面jQuery滑动分页插件：

在paging.js里需要改动如下地方：

在handles方法需要添加两个参数，以及ajax的调用方法，url的地址改成你的地址，以及里面的参数信息都改成你的项目你的数据信息。并且在该js中调用handles的方法参数别忘记改。下面是改动示例：

 

 function handles(pageIndex,totalRecord,totalPage) {
                lis.removeClass('sel-page').eq(pageIndex - 1).addClass('sel-page');
                if (totalPages <= 5) {
                    that.options.callback(pageIndex);
                    return false;
                }
                if (pageIndex >= 3 && pageIndex <= totalPages - 2) distance = (pageIndex - 3) * liWidth;
                if (pageIndex == 2 || pageIndex == 1) distance = 0;
                if (pageIndex > totalPages - 2) distance = (totalPages - 5) * liWidth;
                pageSelect.css('transform', 'translateX(' + (-distance) + 'px)');
                pageIndex == 1 ? firstPage.attr('disabled', true) : firstPage.attr('disabled', false);
                pageIndex == 1 ? prePage.attr('disabled', true) : prePage.attr('disabled', false);
                pageIndex == totalPages ? lastPage.attr('disabled', true) : lastPage.attr('disabled', false);
                pageIndex == totalPages ? nextPage.attr('disabled', true) : nextPage.attr('disabled', false);
                that.options.callback(pageIndex);              
               	 var xmlhttp;
               	var  url="test!json?pageNum="+pageIndex+"&totalRecord="+ totalRecord+"&totalPage="+totalPage;
               	if (window.XMLHttpRequest) {
               		// code for IE7+, Firefox, Chrome, Opera, Safari
               		xmlhttp = new XMLHttpRequest();
               	} else {// code for IE6, IE5
               		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
               	}
               	xmlhttp.onreadystatechange = function() {
               		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
               		  var data=xmlhttp.responseText;
               			var json=eval('{'+data+'}');               			
               			var list=json[0].list;
               			$("#dataGridTableJson tbody").html("");
               			for(var Logintimes in list){
               			 $("#dataGridTableJson tbody").append('<tr>'
            					 +'<td>'+list[Logintimes].id+'</td>'
            					 +'<td>'+list[Logintimes].logintime+'</td>'
            					 +'<td>'+list[Logintimes].ipmessage+'</td>'
            					 +'<td>'+list[Logintimes].loginip+'</td>'					
            					 +'</tr>');		              				
               				//alert(list[Logintimes].logintime);
               			}               		             			
                 		}
               		};
                   xmlhttp.open("POST", url, false);
               	xmlhttp.send();	 
          
            }

这就是一个完整的分页技术，从前端到后台。哪里有问题的可以问。