jQuery分页原理
2008-12-25 13:34
309 查看
源码下载地址：
分页插件jquery.simplepager.js：
// JScript 文件
$.fn.mypagination = function(totalProperty,opts){
opts = $.extend({
perPage:10,
callback:function(){
//$("#feeds").load("htmlpage?page="+page);
}
},opts||{});
return this.each(function(){
function numPages(){
return Math.ceil(totalProperty/opts.perPage);
}
function selectPage(page){
return function(){
currPage = page;
if (page<0) currPage = 0;
if (page>=numPages()) currPage = numPages()-1;
render();
$('img.page-wait',panel).attr('src','images/wait.gif');
opts.callback(currPage+1);
$('img.page-wait',panel).attr('src','images/nowait.gif');
}
}
function render(){
var html = '<table><tbody><tr>'
+'<td><a href="#"><img class="page-first"></a></td>'
+'<td><a href="#"><img class="page-prev"></a></td>'
+'<td><span>第<input type="text" class="page-num">页/共'+numPages()+'页</span></td>'
+'<td><a href="#"><img class="page-next"></a></td>'
+'<td><a href="#"><img class="page-last"></a></td>'
+'<td><img src="images/nowait.gif" class="page-wait"></td>'
+'<td><span style="padding-left:50px;">检索到'+totalProperty+'记录</span></td>'
+'</tr></tbody></table>';
var imgFirst = 'images/page-first-disabled.gif';
var imgPrev = 'images/page-prev-disabled.gif';
var imgNext = 'images/page-next-disabled.gif';
var imgLast = 'images/page-last-disabled.gif';
if (currPage > 0){
imgFirst = 'images/page-first.gif';
imgPrev = 'images/page-prev.gif';
}
if (currPage < numPages()-1){
imgNext = 'images/page-next.gif';
imgLast = 'images/page-last.gif';
}
panel.empty();
panel.append(html);
$('img.page-first',panel)
.bind('click',selectPage(0))
.attr('src',imgFirst);
$('img.page-prev',panel)
.bind('click',selectPage(currPage-1))
.attr('src',imgPrev);
$('img.page-next',panel)
.bind('click',selectPage(currPage+1))
.attr('src',imgNext);
$('img.page-last',panel)
.bind('click',selectPage(numPages()-1))
.attr('src',imgLast);
$('input.page-num',panel)
.val(currPage+1)
.change(function(){
selectPage($(this).val()-1)();
});
}
var currPage = 0;
var panel = $(this);
render();
});
}
使用分页的页面：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="jqPager_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery分页原理(Ajax)</title>
<script type="text/javascript" src="../js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="../js/jquery.simplepager.js"></script>
<script type="text/javascript">
$(function(){
$('#mypage').mypagination(10112,{
callback:function(page){
//alert(page);
//$("#feeds").html("hello world");
$("#feeds").load("PageTest.aspx?page="+page);
}
});
$("#feeds").load("PageTest.aspx?page=1");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="mypage" class="mypagination">
</div>
<div id="feeds" style="width: 500px; height: 500px; background: #369;">
</div>
</div>
</form>
</body>
</html>
iframe里调用的页面：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageTest.aspx.cs" Inherits="jqPager_PageTest" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>根据地址传来的参数显示某一页</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="lblPager" runat="server" Text="第0页"></asp:Label>
</div>
</form>
</body>
</html>
后台：
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class jqPager_PageTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["page"] != null)
lblPager.Text = "第" + Request.QueryString["page"].ToString() + "页";
else
lblPager.Text = "第0页";
}
}
end
分页插件jquery.simplepager.js：
// JScript 文件
$.fn.mypagination = function(totalProperty,opts){
opts = $.extend({
perPage:10,
callback:function(){
//$("#feeds").load("htmlpage?page="+page);
}
},opts||{});
return this.each(function(){
function numPages(){
return Math.ceil(totalProperty/opts.perPage);
}
function selectPage(page){
return function(){
currPage = page;
if (page<0) currPage = 0;
if (page>=numPages()) currPage = numPages()-1;
render();
$('img.page-wait',panel).attr('src','images/wait.gif');
opts.callback(currPage+1);
$('img.page-wait',panel).attr('src','images/nowait.gif');
}
}
function render(){
var html = '<table><tbody><tr>'
+'<td><a href="#"><img class="page-first"></a></td>'
+'<td><a href="#"><img class="page-prev"></a></td>'
+'<td><span>第<input type="text" class="page-num">页/共'+numPages()+'页</span></td>'
+'<td><a href="#"><img class="page-next"></a></td>'
+'<td><a href="#"><img class="page-last"></a></td>'
+'<td><img src="images/nowait.gif" class="page-wait"></td>'
+'<td><span style="padding-left:50px;">检索到'+totalProperty+'记录</span></td>'
+'</tr></tbody></table>';
var imgFirst = 'images/page-first-disabled.gif';
var imgPrev = 'images/page-prev-disabled.gif';
var imgNext = 'images/page-next-disabled.gif';
var imgLast = 'images/page-last-disabled.gif';
if (currPage > 0){
imgFirst = 'images/page-first.gif';
imgPrev = 'images/page-prev.gif';
}
if (currPage < numPages()-1){
imgNext = 'images/page-next.gif';
imgLast = 'images/page-last.gif';
}
panel.empty();
panel.append(html);
$('img.page-first',panel)
.bind('click',selectPage(0))
.attr('src',imgFirst);
$('img.page-prev',panel)
.bind('click',selectPage(currPage-1))
.attr('src',imgPrev);
$('img.page-next',panel)
.bind('click',selectPage(currPage+1))
.attr('src',imgNext);
$('img.page-last',panel)
.bind('click',selectPage(numPages()-1))
.attr('src',imgLast);
$('input.page-num',panel)
.val(currPage+1)
.change(function(){
selectPage($(this).val()-1)();
});
}
var currPage = 0;
var panel = $(this);
render();
});
}
使用分页的页面：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="jqPager_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery分页原理(Ajax)</title>
<script type="text/javascript" src="../js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="../js/jquery.simplepager.js"></script>
<script type="text/javascript">
$(function(){
$('#mypage').mypagination(10112,{
callback:function(page){
//alert(page);
//$("#feeds").html("hello world");
$("#feeds").load("PageTest.aspx?page="+page);
}
});
$("#feeds").load("PageTest.aspx?page=1");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="mypage" class="mypagination">
</div>
<div id="feeds" style="width: 500px; height: 500px; background: #369;">
</div>
</div>
</form>
</body>
</html>
iframe里调用的页面：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageTest.aspx.cs" Inherits="jqPager_PageTest" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>根据地址传来的参数显示某一页</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="lblPager" runat="server" Text="第0页"></asp:Label>
</div>
</form>
</body>
</html>
后台：
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class jqPager_PageTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["page"] != null)
lblPager.Text = "第" + Request.QueryString["page"].ToString() + "页";
else
lblPager.Text = "第0页";
}
}
end
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- j2ee jquery分页原理以及实现
- 一个最为简单的jquery 分页实现方法！可以用用于理解js分页的原理。
- 前端分页功能的实现以及原理（jQuery）
- jquery实现html页面 div 假分页有原理有代码
- 分享一个点击小图切换大图的jquery,并说明一下原理
- jquery向上向下取整适合分页查询
- jquery分页插件AmSetPager(自写)
- jquery的翻页分页插件使用
- jquery分页展示控件：kkpager
- Hibernate分页查询原理解读
- 使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页
- jquery.pagination +JSON 动态无刷新分页实现代码
- Hibernate实现分页查询的原理分析
- 实现Hibernate分页查询原理解读
- jQuery前端分页示例分享
- jQuery实现图片走马灯效果的原理分析
- hibernate分页实现原理
- 基于jquery的无刷新分页技术
- jQuery 插件运行原理