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

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

js部分：开始直接打开的时候获取不到数据，提示不支持跨域访问：XMLHttpRequest cannot loadhttp://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)' onclick='$(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)' onclick='$(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)' onclick='$(parentNode.parentNode.parentNode).changepage("+j+",\""+urlstr+"\","+pagerow+","+barcount+")'>"+j+"</a></li>";  }  elereturn+="<li><span>....</span></li><li><a href='javascript:void(0)' onclick='$(parentNode.parentNode.parentNode).changepage("+pc+",\""+urlstr+"\","+pagerow+","+barcount+")'>"+pc+"</a></li>";  return true;   })())||(cur>= (pc-pageh) && (function (){  elereturn+="<li><a href='javascript:void(0)' onclick='$(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)' onclick='$(parentNode.parentNode.parentNode).changepage("+j+",\""+urlstr+"\","+pagerow+","+barcount+")'>"+j+"</a></li>";  }  return true;   })())||( function (){  elereturn+="<li><a href='javascript:void(0)' onclick='$(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)' onclick='$(parentNode.parentNode.parentNode).changepage("+j+",\""+urlstr+"\","+pagerow+","+barcount+")'>"+j+"</a></li>";    }    elereturn+="<li><span>....</span></li><li><a href='javascript:void(0)' onclick='$(parentNode.parentNode.parentNode).changepage("+pc+",\""+urlstr+"\","+pagerow+","+barcount+")'>"+pc+"</a></li>";    return true;   }  )();  }  elereturn+=cur<pc?"<li class='out'><a href='javascript:void(0)' onclick='$(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) 调用时传递参数不同，就可以得到不同长度的分页条。