JavaScript YUI 2.8: DataTable jquery form 异步请求显示数据分页
YUI Library: 一切关于yui的资料都可以获取
http://developer.yahoo.com/yui/
上个效果图:

两步走:
1 数据的获取(jquery form动态提交或者jquery ajax异步请求,内容和记录分两次请求):
2 数据的显示:(yahooui datatable)

1 数据的获取(jquery form动态提交或者jquery ajax异步请求):
YAHOOUI提供datasource可以异步去查询数据和数据的总记录数(一次查完),由于

                   

 //数据源
	this.myDataSource = new YAHOO.util.DataSource(URL);
         

         URL填写成action的时候跳转不了,可能自己还没有弄清楚,有谁知道请告诉我,
         谢谢了.数据获取采用jquery的form动态提交或者js变量作为URL参数进行请求都可以,
         但是后者会有中文乱码问题,并且当参数过长的时候URL会变得很长.曾经把参数以
           json格式传递过去,只需一个变量,后台直接将json格式参数转换成JavaBean
          关于json与java之间的相互转换请看这里,以后补上

         现在补上了,2010-2-10,点击连接就可以看了js变量作为URL参数乱码            内容数据和分页导航的数据是分两次请求去取的,所以查询条件和page,perPageResults都必须同步的传递过去,否则内容和记录数就不一致            

js变量作为URL参数进行传递

//得到分页内容url 
function getQueryUrl(page) {
	var account = document.getElementById("uuser").value;
	var name = document.getElementById("uname").value;
	var perPageResults = document.getElementById("perPageResults").value;
	var backEndUrl = contextPath+"/yuidemo/userManager.do?method=queryByYahoo_1&count=1&account="+account+"&name="+name+"&perPageResults="+perPageResults;
	if (typeof page != 'undefined'){
		backEndUrl +="&page="+page;
	}
	return backEndUrl;
}
//内容显示 jquery ajax异步请求
function content(pageUrl){
		$.ajax( {
		type : "POST",
		url : pageUrl,
		cache : false,
		dataType: "json",
		success : showContent
	});
}

  
jquery form的动态提交把page也必须包含进去

// 内容显示
function content(){
	 var options = { 
		      dataType:  'json', 	 
		      url:       contextPath+"/yuidemo/userManager.do?method=queryByYahoo_2&count=1",
		      success:   showContent
		 }; 
		 $('#myForm').ajaxForm(options);
		 $('#myForm').submit(); 
}

后台处理

List<UserDTO> list = new ArrayList<UserDTO>();
			int page = 1;
			if (user.getPage() != null && !"".equals(user.getPage())) {
				page = Integer.parseInt(user.getPage());
			}
			int perPageResults = 10;
			if (user.getPerPageResults() != null
					&& !"".equals(user.getPerPageResults())) {
				perPageResults = Integer.parseInt(user.getPerPageResults());
			}
			// ROWNUM rowIndex 从1开始不是从0开始
			user.setStartRowNum((long) (page - 1) * perPageResults + 1);
			user.setEndRowNum((long) page * perPageResults);
			list = this.userDao.query(user);
			JSONArray json = new JSONArray();
			json.clear();
			json = JSONArray.fromObject(list);
			response.setHeader("X-JSON", json.toString());
			response.setCharacterEncoding("UTF-8");
			response.setHeader("Cache-Control", "no-cache,must-revalidate");// 清楚缓存
			response.setHeader("Pragma", "no-cache"); // HTTP 1.0
			response.setDateHeader("Expires", 0); // prevents caching at the
			// json.put("data", 1);
			response.getWriter().print(json.toString());
			return null;   

 
千万不要复制粘贴,我只是说思路而已
2 数据的