今天加了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) 调用时传递参数不同,就可以得到不同长度的分页条。