【菜鸟手打js】第二篇-动态分页条

    今天加了ajax获取数据部分，没有用真实数据，随便给了个数字假装是得到的记录数，后面再改成从数据库获取。html部分和css部分没变。另外加了servlet页来客串。先上代码：

js部分：开始直接打开的时候获取不到数据，提示不支持跨域访问：XMLHttpRequest cannot load http://localhost:8095/ServerManageWeb/TestforPage?curpage=2. Origin null is not allowed by Access-Control-Allow-Origin.

页面丢服务器上访问就OK了。（网上有跨域访问的解决方案）

<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
//<!--匿名自执行函数，jquery做实参传入可作为局部变量
(function ($){
	//声明为jquery对象方法，便于区别实例化
	//cur当前页，url要用ajax访问的url，pagerow每页显示几条记录，pc总共几条记录
	$.fn.showbar=function(cur,urlstr,pagerow,barcount,pc){
 		elereturn="<ul class='pageul'>";
	 	//未找到更好的方法前先用parentNode....
	 	elereturn+=cur>1?"<li class='out'><a href='javascript:void(0)' οnclick='$(parentNode.parentNode.parentNode).changepage("+(cur-1)+",\""+urlstr+"\","+pagerow+","+barcount+")'>上一页</a></li>":"<li class='out'>上一页</li>";
	 	var pageh=Math.floor(barcount/2);//向下取整
	 	if(pc<=barcount){
		 	for (var i = 1; i < pc+1; i++) {
		 		elereturn+=(i==cur)?"<li class='cur'>"+i+"</li>":"<li><a href='javascript:void(0)' οnclick='$(parentNode.parentNode.parentNode).changepage("+i+",\""+urlstr+"\","+pagerow+","+barcount+")'>"+i+"</a></li>";
		 	}	
	  }else{//利用js的&&、||执行特点减少分支语句，可读性会降低
	  	(cur<=pageh+1 && (function (){
	  		for (var j = 1; j < barcount; j++) {
	  		 elereturn+=(j==cur)?"<li class='cur'>"+j+"</li>":"<li><a href='javascript:void(0)' οnclick='$(parentNode.parentNode.parentNode).changepage("+j+",\""+urlstr+"\","+pagerow+","+barcount+")'>"+j+"</a></li>";
	  		}
	  		elereturn+="<li><span>....</span></li><li><a href='javascript:void(0)' οnclick='$(parentNode.parentNode.parentNode).changepage("+pc+",\""+urlstr+"\","+pagerow+","+barcount+")'>"+pc+"</a></li>";
	  		return true; 	
	  	})())||(cur>= (pc-pageh) && (function (){
	  		elereturn+="<li><a href='javascript:void(0)' οnclick='$(parentNode.parentNode.parentNode).changepage(1,\""+urlstr+"\","+pagerow+","+barcount+")'>1</a></li><li><span>....</span></li>";
	  		for (var j = (cur-pageh); j < pc+1; j++) {
	  		 elereturn+=(j==cur)?"<li class='cur'>"+j+"</li>":"<li><a href='javascript:void(0)' οnclick='$(parentNode.parentNode.parentNode).changepage("+j+",\""+urlstr+"\","+pagerow+","+barcount+")'>"+j+"</a></li>";
	  		}
	  		return true; 	
	  	})())||( function (){
	  		elereturn+="<li><a href='javascript:void(0)' οnclick='$(parentNode.parentNode.parentNode).changepage(1,\""+urlstr+"\","+pagerow+","+barcount+")'>1</a></li><li><span>....</span></li>";
	  		for (var j = cur-pageh+1; j < cur+pageh; j++) {
	  			elereturn+=(j==cur)?"<li class='cur'>"+j+"</li>":"<li><a href='javascript:void(0)' οnclick='$(parentNode.parentNode.parentNode).changepage("+j+",\""+urlstr+"\","+pagerow+","+barcount+")'>"+j+"</a></li>";
	  	  }
	  	  elereturn+="<li><span>....</span></li><li><a href='javascript:void(0)' οnclick='$(parentNode.parentNode.parentNode).changepage("+pc+",\""+urlstr+"\","+pagerow+","+barcount+")'>"+pc+"</a></li>";
	  	  return true; 
	  	}
	  	)();
	  }
	  elereturn+=cur<pc?"<li class='out'><a href='javascript:void(0)' οnclick='$(parentNode.parentNode.parentNode).changepage("+(cur+1)+",\""+urlstr+"\","+pagerow+","+barcount+")'>下一页</a></li>":"<li class='out'>下一页</li></ul>";
	  this.empty();
	  this.append(elereturn);
	}
	//cur当前页，urlstr要用ajax访问的url，pagerow每页显示几条记录，barcount翻页条里最多显示几个页码
	/*
	要把页面放服务器上否则ajax获取不到值，网上说是Chrome不支持本地ajax会报：
	a标签上onclick调用时url必须加上双引号，否则会报语法错误：Uncaught SyntaxError: Unexpected token :
	*/
	$.fn.changepage=function (cur,urlstr,pagerow,barcount){
	 	var pc=1;
	 	if(cur<1)cur=1;
	 	if(pagerow<1)pagerow=1;
		if(urlstr){
			var mybar=$(this);//要再ajax外面定义，否则this指向的是ajaxSettings
			$.ajax({
				url:urlstr,
				data:{curpage:cur},
				dataType:"json",
				success:function(result){
					pc=Math.floor((parseInt(result.rowcount)+pagerow-1)/pagerow);

					if(cur>pc)cur=pc;
					mybar.showbar(cur,urlstr,pagerow,barcount,pc);
				}
				
			});	
		}
	}
	
})($);
		$(function(){
			//静态实现先这样
			$("#page1").changepage(2,"http://localhost:8095/ServerManageWeb/TestforPage",2,10);
			$("#page2").changepage(13,"http://localhost:8095/ServerManageWeb/TestforPage",2,15);
			})
		
			//-->
</script>

另外是服务端的servlet代码：

package com.forenet.web;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;



/**
 * Servlet implementation class TestforPage
 */
public class TestforPage extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public TestforPage() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		int cur=Integer.parseInt(request.getParameter("curpage"));
		String strRespXml = null;
		PrintWriter cliWriter = null;
		if(cur<1)cur=1;
		response.setContentType("text/html");
//		response.setHeader("pragma", "no-cache");
		request.setCharacterEncoding("utf-8");
		try {
			strRespXml = "{\"rowcount\":\"50\"}";
			cliWriter = response.getWriter();
			cliWriter.print(strRespXml); //成功直接返回信息
			cliWriter.flush();
			cliWriter.close();
		} 
		catch (Exception e) {
			e.printStackTrace();
		}
	}

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

}

最终的效果就是：

通过$("#page1").changepage(2,"http://localhost:8095/ServerManageWeb/TestforPage",2,10) 调用时传递参数不同，就可以得到不同长度的分页条。