自己写了一个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());
%>
分享到：
相关推荐
**jQuery DataTables 服务器端分页详解** jQuery DataTables 是一款功能强大的JavaScript库，用于将HTML表格转化为交互式数据视图。服务器端分页（Server-side pagination）是其核心特性之一，尤其适用于处理大量...
服务器端分页意味着每次用户翻页时，浏览器发送请求到服务器获取对应页面的数据；客户端分页则是在浏览器端处理数据分页，适用于数据量较小的情况。本实例中，我们将重点讨论服务器端分页。 1. **基本步骤** - **...
以下是使用JQuery DataTables 实现服务器端分页的关键技术点： 1. **初始化设置**： - `bProcessing`: 设置为`false`表示在处理数据时不会显示等待提示框。 - `bServerSide`: 设置为`true`表明表格数据将在服务器...
本教程将详细讲解如何使用jQuery库来实现表格的动态分页，同时结合Java后端进行数据的动态查询和分页处理。 首先，让我们了解动态分页的基本原理。动态分页是指在用户滚动或点击分页按钮时，仅加载当前显示的数据，...
服务器端根据排序条件处理数据，返回给客户端，最后由jQuery更新页面上的表格或其他展示数据的元素。 在提供的压缩包文件"JQPagination"中，可能包含以下内容： 1. **JavaScript文件**：用于实现jQuery无刷新分页...
综上所述，"基于bootstrap+jQuery的前端分页"项目涵盖了前端开发中的多个关键知识点，包括UI框架的使用、JavaScript库的应用、异步数据处理、响应式设计和前后端交互。通过理解和掌握这些技术，开发者可以构建出功能...
- 通过Ajax异步请求，从服务器获取新的分页数据，然后使用jQuery的DOM操作方法（如`append()`）将新数据添加到列表中。 - 根据用户交互更新当前页指示器和分页按钮的状态。 在实际应用中，还需要考虑性能优化，比如...
本资源"jquery列表分页样式支持手机端分页滚动效果代码"聚焦于如何利用jQuery实现一种适应手机端的列表分页效果，特别是在用户滚动页面时能流畅地加载更多内容。 首先，我们要理解分页在网页设计中的重要性。在数据...
本知识点主要讲解如何使用jQuery实现前台分页，这是一种无需服务器端处理，完全在客户端进行的数据分页技术。 首先，jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。在...
7. **分页算法**：在服务器端，需要实现分页算法，根据请求的页码和每页数量，计算出对应的记录范围，返回相应数据。 8. **安全性考虑**：防止用户直接修改URL中的页码参数，导致非法访问。服务器端应进行验证，...
4. **服务器端处理**：服务器端需要接收AJAX请求中的页码参数，根据页码查询数据库，然后返回对应页的数据，通常以JSON格式。 5. **客户端渲染**：在`success`回调中，我们将服务器返回的数据插入到页面相应的位置...
6. **分页实现**：分页通常由服务器端和客户端两部分组成。服务器端负责根据页码和每页数量计算需要返回的数据范围，然后从数据库中获取这些数据。客户端则通过Ajax请求，向服务器发送分页参数，并接收返回的数据，...
7. **数据绑定**：与服务器端交互是分页的重要环节。你可以结合 AJAX 或其他数据绑定技术，动态加载每一页的数据，实现无缝分页体验。 8. **性能优化**：为了提升性能，应尽可能减少初始加载的数据量。分页插件可以...
假分页，又称为模拟分页，是通过前端技术实现的一种分页效果，它并不涉及服务器端的数据分块，而是通过计算和显示有限的数据集来营造分页的感觉。 这篇博客的标题和描述指向了一个使用jQuery来实现表格假分页的实践...
DataTables支持自定义分页样式，同时提供了多种数据源（如Ajax、服务器端、JSON等）的支持。 2. jqGrid：jqGrid是一个功能丰富的表格插件，它也包含了分页功能，允许用户自定义分页按钮和样式，支持动态加载数据。 ...
- 静态分页通常是在服务器端预先计算好每一页的数据，并将这些页面的数据存储在不同的HTML片段或者JSON格式中。当用户点击分页按钮时，插件会加载相应的页面内容，而不是重新向服务器请求全部数据。 3. **插件实现...
2. 分页计算：服务器端根据这些参数计算出查询的起始和结束位置，然后执行数据库查询。 3. 数据传输：服务器返回分页数据，可以是JSON格式或其他序列化格式。 4. 前端渲染：jQuery或其他JavaScript库用于动态更新DOM...
在分页场景中，`Default.aspx`可能会包含一个GridView或ListView等数据绑定控件，这些控件可以通过设置其分页属性来实现服务器端分页。同时，页面上也会有jQuery的脚本来处理客户端的分页事件。 `Default.aspx.cs`...
通过理解这些知识点，开发者可以构建出适应各种需求的分页解决方案，无论是在PHP后台还是其他服务器端技术的支持下。同时，这样的无刷新分页方法也符合现代Web应用的交互设计理念，提高了用户体验。