【菜鸟手打js】第四篇-将数据集转为json格式字符串

小长假马上来临，心情很爽，就抽空写写。习惯使用mysql数据库，另外dao层没用框架都是硬编码写。那些自己封装的辅助类就不贴出来了，每个人都有自己用习惯的一套。

js里没多大变更，为适应后台改了下变量名。加了个error事件，因为传回json时出了点问题，老是返回状态是200但不触发success，之后查是json格式问题，只能"key":"value",不能用单引号'key':'value'这样。

贴代码，html和css没变不贴。js只贴改动部分

$.fn.changepage=function (cur,urlStr,pagerow,pagecount){//pagerow每页显示多少条记录,pagecount页码数
		var pc=1;
	 	if(cur<1)cur=1;
	 	if(pagerow<1)pagerow=1;
	 	if(pagecount<1)pagecount=1;
		if(urlStr){
			var mybar=$(this);//要再ajax外面定义，否则this指向的是ajax的内置对象
			$.ajax({
				url:urlStr,
				data:{now_page:cur,page_row:pagerow,opera_type:1},
				dataType:"json",
				success:function(result){
					pc=Math.floor((parseInt(result.rowCount)+pagerow-1)/pagerow);
					if(cur>pc)cur=pc;
					var ss=mybar.showdata(result.dataList);
					ss+=mybar.showbar(cur,urlStr,pagerow,pc,pagecount);
//					var ss=mybar.showbar(cur,urlStr,pagerow,pc);
					mybar.empty();
	  				mybar.append(ss);
				},
				error:function(data){
					alert(data);
				}
			});	
		}
	}

servlet部分有预留点代码以后用的，贴个doGet、doPost就好，省地方

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		GlobeContext.setContext("homedir", request.getSession().getServletContext().getRealPath("/"));
		int nowPage=0;
		String queryOption;
		String resultStr="";
		int operaType;
		int pageRow=0;
		 response.setContentType("text/json;charset=UTF-8");//设置返回格式与编码方式
//	      response.setHeader("pragma", "no-cache");  
		  request.setCharacterEncoding("utf-8");
		  IParameterObj param=new ParameterObj();
		  IResultObj result=new ResultObj();
		if(null!=request.getParameter("now_page")){
			nowPage=Integer.parseInt(request.getParameter("now_page"));
		}
		if(null!=request.getParameter("page_row")){
			pageRow=Integer.parseInt(request.getParameter("page_row"));
		}
		
		if(null!=request.getParameter("query_option")){
			queryOption=request.getParameter("query_option");
		}
		if(null!=request.getParameter("opera_type")){
			operaType=Integer.parseInt(request.getParameter("opera_type"));
		}else return;
		switch(operaType){
			case 1:
				QueryData qd=new QueryData();
				resultStr=qd.execute(nowPage,pageRow);
				break;
		}
		PrintWriter out = response.getWriter();  
        out.println("{"+resultStr+"}");  
        out.flush();  
        out.close();
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		this.doGet(request, response);
	}

接下来就是查询数据的类

public class QueryData extends BusiService {
	String dept_ids;
	public String execute(int curPage,int pageRow) 
	{
		String strUser;
		//条件搜索已完结列表
		String option="";//预留参数做条件搜索
		String searchBy;
		String searchValue;
		String resultStr="";
		Connection conn = null;
		PreparedStatement stmt = null;
		ResultSet rs = null;
		PreparedStatement stmt1 = null;
		ResultSet rs1 = null;
		int star=(curPage-1)*pageRow;
		System.out.println("curPage:"+curPage+",star:"+star+",pageRow:"+pageRow+";");
		try
		{
			conn = DBforfenye.getConnection();
			String strSql;
			strSql = "select count(*) from dsf_print_apply";//取得记录总数
//			System.out.println(strSql);
			stmt1 = conn.prepareStatement(strSql);
			rs1 = stmt1.executeQuery();
			if(rs1.next()){
				resultStr="\"rowCount\":\""+rs1.getInt(1)+"\",";
			}
			
			strSql = "select apply_id,user_id,approved_by from dsf_print_apply limit ?,?";//根据传入条件搜索记录集
			
//			System.out.println(strSql);
			stmt = conn.prepareStatement(strSql);
			stmt.setInt(1, star);
			stmt.setInt(2, pageRow);
			rs = stmt.executeQuery();
			resultStr+=new DataStore(rs).getDataSet();//将数据集封装为json格式字符串返回
			
			conn.commit();
		}
		catch(SQLException e)
		{
				e.printStackTrace();
			return "ERROR";
		}
		catch(AppException e)
		{
				e.printStackTrace();
			return "ERROR";
		}
		catch(Exception e)
		{
				e.printStackTrace();
			return "ERROR";
		}
		finally
		{
			try 
			{
				if (stmt != null) stmt.close();
				if (stmt1 != null) stmt1.close();
				if (conn != null) conn.close();
			}
			catch(Exception ex){}
		}
		return resultStr;
	}
}

接下来是格式转换类

public class DataStore {
	
	private long rowCount = 0;//行数
	
	private int columnCount = 0;//列数
	private String jsonData="";
	
	//private Log _log = LogFactory.getLog(getClass());
	
	public DataStore(ResultSet rs) throws AppException{
		
		
		try{
			
			ResultSetMetaData rsmd = rs.getMetaData();
			
			columnCount = rsmd.getColumnCount();//列数
			
			if (columnCount < 1) return;
			//获取数据集合
			String rowData="";
			while (rs.next()){
				String oneRow="";
				for(int i=1;i<=columnCount;i++){
					
					oneRow+="\""+rs.getString(i)+"\",";
				}
				oneRow=oneRow.substring(0,oneRow.length()-1);
				rowData+="["+oneRow+"],";
				System.out.println(rowData);
				rowCount = rowCount + 1;
			}
			rowData=rowData.substring(0, rowData.length()-1);
			jsonData="\"dataList\":["+rowData+"]";
			//_log.info(new Long(rowCount));
			
		}catch(SQLException e){
			e.printStackTrace();
			throw new AppException("构造数据存储对象出错",e);
		}
		
		
				
	}
	
	public String getDataSet(){
		
		if (columnCount < 1) return null;
		return this.jsonData;
	}
	
	public int getColumnCount() {
		return columnCount;
	}

	public long getRowCount() {
		return rowCount;
	}

}

这样动态分页的基本框架就出来了，接下来还是得把前端css调整下，看能弄好看点不，接着加入交互操作。