JQuery 服务器端分页
程序员文章站
2022-07-12 15:12:27
...
自己写了一个JQuery的分页插件，大家看看:
页面上调用：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="css/base/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="css/page/style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.page.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<body>
<div>
<table>
<tr class="title">
<td>id</td><td>name</td>
</tr>
<tr class="title">
<td colspan=2>
<div id="pagebar"></div>
</td>
</tr>
</table>
<div>
</body>分页插件：
$.fn.page = function(options){
var settings = {
size: 10,
url: "index.do"
};
if(options){
$.extend(settings, options);
}
this.addClass("page");
var p = '#'+this.attr("id"); //分页条的ID
var url = settings.url; //请求的服务器路径
var size = settings.size; //每页显示的记录数
var curPage = 1; //当前页数
var maxPages = 0;
var maxRows = 0;
var pgBar = '<div class="pgBar">';
pgBar += '<img src="css/page/images/separator.gif" class="separator" />';
pgBar += '<img src="css/page/images/first.gif" alt="首页" class="firstBtn" />';
pgBar += '<img src="css/page/images/separator.gif" class="separator" />';
pgBar += '<img src="css/page/images/prev.gif" alt="前页" class="preBtn"/>';
pgBar += '<img src="css/page/images/separator.gif" class="separator" />';
pgBar += '<span class="pageInfo">第 <label id="pageNo">1</label> 页 /';
pgBar += '共 <label id="pageAll">12</label> 页</span>';
pgBar += '<img src="css/page/images/separator.gif" class="separator" />';
pgBar += '<img src="css/page/images/next.gif" alt="后页" class="nextBtn"/>';
pgBar += '<img src="css/page/images/separator.gif" class="separator" />';
pgBar += '<img src="css/page/images/last.gif" alt="尾页" class="endBtn"/>';
pgBar += '<img src="css/page/images/separator.gif" class="separator" />';
pgBar += '<span class="pageInfo">检索到 <label id="rowAll">80</label> 条记录</span>';
pgBar += '<img src="css/page/images/separator.gif" class="separator" />';
pgBar += '<div><input class="text" id="forwardPage"/><input class="button" id="forward" type="button" value="转到" /></div>';
pgBar += '<div>';
this.html(pgBar);
loadData(url, size, curPage); //第一次加载数据
disablePrev(p);
//点击首页
$(p+" .firstBtn").click(function(){
disablePrev(p);
enableNext(p);
if(curPage == 1) return;
curPage=1;
//Ajax提交
loadData(url, size, curPage);
});
//点击前页
$(p+" .preBtn").click(function(){
enableNext(p);
if(curPage == 1) return;
curPage--;
if(curPage == 1) {
disablePrev(p);
}
//Ajax提交
loadData(url, size, curPage);
});
//点击后页
$(p+" .nextBtn").click(function(){
maxPages = $("#pageAll").text();
if(curPage == maxPages) return;
enablePrev(p);
curPage++;
if(curPage == maxPages)
disableNext(p);
//Ajax提交
//alert(curPage);
loadData(url, size, curPage);
});
//点击尾页
$(p+" .endBtn").click(function(){
enablePrev(p);
disableNext(p);
maxPages = $("#pageAll").text();
if(curPage == maxPages) return;
curPage = maxPages;
//alert(maxPages);
//Ajax提交
//alert(curPage);
loadData(url, size, curPage);
});
//点击跳转
$(p+" #forward").click(function(){
curPage = $("#forwardPage").val();
maxPages = $("#pageAll").text();
//alert(curPage.length);
if(curPage.length == 0){
alert("请输入要跳转的页数");
return;
}
if(curPage == 1){
disablePrev(p);
enableNext(p);
}
if(curPage == maxPages){
enablePrev(p);
disableNext(p);
}
//ajax提交
//alert(curPage);
loadData(url, size, curPage);
});
}
//ajax方法
function loadData(url, size, curPage){
$.ajax({
type:"POST",
url:url,
data:"curPage="+curPage+"&pageSize="+size,
dataType:"json",
beforeSend:function(){
$(".ui-widget-overlay").show();
},
success:function(data){
$("#pageNo").text(data.curPage);
$("#pageAll").text(data.maxPageCount);
$("#rowAll").text(data.maxRowsCount);
$(".ui-widget-overlay").hide();
var s= '';
for(var i=0;i<data.list.length;i++){
s+="<tr><td>"+data.list[i].jdid+"</td><td>"+data.list[i].jd+"</td></tr>";
}
$("table tr").not($(".title")).each(function(){$(this).remove();});
$("table tr").eq(0).after(s);
}
});
}
//停用首页前页
function disablePrev(p){
$(p+" .firstBtn").attr("src","css/page/images/first_disabled.gif");
$(p+" .preBtn").attr("src","css/page/images/prev_disabled.gif");
}
//
function enablePrev(p){
$(p+" .firstBtn").attr("src","css/page/images/first.gif");
$(p+" .preBtn").attr("src","css/page/images/prev.gif");
}
function disableNext(p){
$(p+" .nextBtn").attr("src","css/page/images/next_disabled.gif");
$(p+" .endBtn").attr("src","css/page/images/last_disabled.gif");
}
function enableNext(p){
$(p+" .nextBtn").attr("src","css/page/images/next.gif");
$(p+" .endBtn").attr("src","css/page/images/last.gif");
}
js中调用：
$(function(){
$("#pagebar").page({size:15, url:"doIndex.jsp"});
});
处理页面:doIndex.jsp
<%
GetData gd = new GetData();
int curPage = 1;
int pageSize = 10;
if(request.getParameter("pageSize") != null)
pageSize = Integer.parseInt(request.getParameter("pageSize"));
if(request.getParameter("curPage") != null)
curPage = Integer.parseInt(request.getParameter("curPage"));
PageDao p = gd.getJd(curPage, pageSize);
List list = p.getList();
StringBuffer json = new StringBuffer();
response.setHeader("Cache-Control", "no-cache");
response.setContentType("text/json;charset=UTF-8");
request.setCharacterEncoding("utf-8"); //构造json字符串
//json.append("[");
json.append("{");
json.append("\"curPage\":"+p.getCurPage()+",");
json.append("\"maxPageCount\":"+p.getMaxPageCount()+",");
json.append("\"maxRowsCount\":"+p.getMaxRowsCount()+",");
json.append("\"list\":");
json.append("[");
for(int i = 0; i < list.size();i++){
TblJd jd = (TblJd)list.get(i);
json.append("{");
json.append("\"jdid\":\""+jd.getJdid()+"\",");
json.append("\"jd\":\""+jd.getJd()+"\"");
json.append("}");
if(i != list.size()-1){
json.append(",");
}
}
json.append("]");
json.append("}");
//json.append("]");
//System.out.println(json.toString());
out.print(json.toString());
%>