- 浏览: 240449 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
xmwjfid:
写的不错,就是有个疑问groupSize 这个用来干什么?
jQuery Ajax分页(pagination.js)分页插件 (转载) -
GRACEACT:
Thanks.对我很有帮助。
使用Java组件itext 生成pdf的介绍 -
xianzi_2008:
jQuery Ajax分页(pagination.js)分页插件 (转载) -
xiaotao.2010:
Demo a=new Demo()
{ ...
匿名类 -
system1029hq:
jQuery Ajax分页(pagination.js)分页插件 (转载)
pagination.js
pgdataproxy.jsp
/*action传到此jsp页面一个list即可*/
page.jsp
//==============展示jQuery分页效果页面==========================
/** * jQuery分页插件 * 功能:指定页数内静态分页,超过指定页数后ajax请求下一组静态分页 * @version 1.0 beta * @date 2008-04-14 * @param config 插件配置 */ jQuery.fn.pagination = function(config){ init("#"+this.attr("id"),config); } /** * 初始化,主程序 * @param t 容器的ID,带#号 * @param config 插件配置 */ function init(t,config){ //公有变量 var dataStore = config.dataStore; //数据 var totalRecord = config.totalRecord > 0 ? config.totalRecord : 0; //总记录数 if(totalRecord == 0){ $(t).css("text-align","center"); $(t).css("line-height","50px"); $(t).html("很遗憾,没有检索到任何记录!"); return; } var configPage = config.perPage > 0 ? config.perPage : 10; var perPage = $.cookie(t+"_perPage") == null ? configPage : parseInt($.cookie(t+"_perPage")); //每页显示记录数 var proxyUrl = config.proxyUrl > 0 ? config.proxyUrl : 'pgdataproxy.jsp'; //数据代理地址 var groupSize = config.groupSize; //组大小 var barPosition = config.barPosition == null ? 'bottom' : config.barPosition; //工具条位置 var ajaxParam = config.ajaxParam; //ajax的请求参数 //私有变量 var totalPage = Math.ceil(totalRecord/perPage); //总页数 var currentPage = $.cookie(t+"_currentPage") == null ? 1 : parseInt($.cookie(t+"_currentPage")); //当前页码 var startRecord; //每页起始记录 var endRecord; //每页结束记录 var gpStartPage; var gpEndPage; var gpStartRecord; var gpEndRecord; //数据容器 var container = '<div class="pgContainer"></div>' //添加工具条 var toolbar = '<div class="pgToolbar">'; toolbar += '<div class="pgPanel">'; toolbar += '<div><select class="pgPerPage">'; if(config.perPage>0) toolbar += '<option value="'+config.perPage+'">'+config.perPage+'</option>'; toolbar += '<option value="5">5</option>'; toolbar += '<option value="10">10</option>'; toolbar += '<option value="15">15</option>'; toolbar += '<option value="20">20</option>'; toolbar += '<option value="25">25</option>'; toolbar += '<option value="40">40</option>'; toolbar += '</select> </div>'; toolbar += '<div class="separator"></div>'; toolbar += '<div class="pgBtn pgFirst" title="首页"></div>'; toolbar += '<div class="pgBtn pgPrev" title="上页"></div>'; toolbar += '<div class="separator"></div>'; toolbar += '<div>第 <input class="pgCurrentPage" type="text" value="' + currentPage + '" title="页码" /> 页 / 共 <span class="pgTotalPage">' + totalPage + '</span> 页</div>'; toolbar += '<div class="separator"></div>'; toolbar += '<div class="pgBtn pgNext" title="下页"></div>'; toolbar += '<div class="pgBtn pgLast" title="尾页"></div>'; if(groupSize){ toolbar += '<div class="separator"></div>'; toolbar += '<div class="pgBtn pgRefresh" title="刷新"></div>'; } toolbar += '<div class="separator"></div>'; toolbar += '<div class="pgSearchInfo">检索到 ' + totalRecord + ' 条记录,显示第 <span class="pgStartRecord">' + startRecord + '</span> 条 - 第 <span class="pgEndRecord">' + endRecord + '</span> 条记录</div>'; toolbar += '<hr class="cleanFloat" /></div>'; toolbar += '</div>'; if(perPage<totalRecord) switch(barPosition){ case 'top': $(t).html(toolbar+container); break; case 'bottom': $(t).html(container+toolbar); break; default: $(t).html(toolbar+container+toolbar); } else $(t).html(container); var btnRefresh = $(t+" .pgRefresh"); //刷新按钮 var btnNext =$(t+" .pgNext"); //下一页按钮 var btnPrev = $(t+" .pgPrev"); //上一页按钮 var btnFirst = $(t+" .pgFirst"); //首页按钮 var btnLast = $(t+" .pgLast"); //末页按钮 var btnGo = $(t+" .pgNext,"+t+" .pgLast"); var btnBack = $(t+" .pgPrev,"+t+" .pgFirst"); var btn = $(t+" .pgFirst,"+t+" .pgPrev,"+t+" .pgNext,"+t+" .pgLast"); var mask; var valCurrentPage = $(t+" .pgCurrentPage"); var valStartRecord = $(t+" .pgStartRecord"); var valEndRecord =$(t+" .pgEndRecord"); var valContainer = $(t+" .pgContainer"); var valPerPage = $(t+" .pgPerPage"); var valTotalPage = $(t+" .pgTotalPage"); $(t+" .pgPerPage").attr("value",perPage); getGroupStartEnd(); getStartEnd(); if(dataStore==null) getRemoteData(); else{ getStartEnd(); loadData(); refresh(); } //刷新按钮监听 btnRefresh.bind("mousedown",pressHandler).bind("mouseup",unpressHandler).bind("mouseout",unpressHandler); //刷新工具栏 refresh(); //按钮监听 btnNext.click( function(){ if(currentPage < totalPage){ if(!dataStore || currentPage == gpEndPage){ currentPage += 1; getGroupStartEnd(); getStartEnd(); getRemoteData(); }else{ currentPage += 1; getStartEnd(); loadData(); refresh(); } } } ); btnPrev.click( function(){ if(currentPage > 1){ if(!dataStore || currentPage == gpStartPage){ currentPage -= 1; getGroupStartEnd(); getStartEnd(); getRemoteData(); }else{ currentPage -= 1; getStartEnd(); loadData(); refresh(); } } } ); btnFirst.click( function(){ if(!dataStore || currentPage > 1){ if(gpStartPage > 1){ currentPage = 1; getGroupStartEnd(); getStartEnd(); getRemoteData(); }else{ currentPage = 1; getStartEnd(); loadData(); refresh(); } } } ); btnLast.click( function(){ if(!dataStore || currentPage < totalPage){ if(gpEndPage > 0 && gpEndPage < totalPage){ currentPage = totalPage; getGroupStartEnd(); getStartEnd(); getRemoteData(); }else{ currentPage = totalPage; getStartEnd(); loadData(); refresh(); } } } ); btnRefresh.click( function(){ getGroupStartEnd(); getStartEnd(); getRemoteData(); } ); //页码输入框监听 valCurrentPage.keydown( function(){ var targetPage = parseInt($(this).val()); if(event.keyCode==13 && targetPage>=1 && targetPage<=totalPage){ if(!dataStore || gpStartPage > targetPage || (gpEndPage > 0 && gpEndPage < targetPage)){ currentPage = targetPage; getGroupStartEnd(); getStartEnd(); getRemoteData(); }else{ currentPage = targetPage; getStartEnd(); loadData(); refresh(); } } } ); valPerPage.change( function(){ perPage = parseInt($(this).val()); currentPage = 1; totalPage = Math.ceil(totalRecord/perPage); if(groupSize){ getGroupStartEnd(); getStartEnd(); getRemoteData(); }else{ getStartEnd(); loadData(); refresh(); } } ); /*********************************init私有函数***************************************************/ /** * 置为正在检索状态 */ function startLoad(){ $(t).addClass("container"); mask = document.createElement('div'); $(mask).addClass("mask"); $(mask).css("height",$(t).height()); $(t).append(mask); $(t+" .pgRefresh").addClass("pgLoad"); $(t+" .pgSearchInfo").html("正在检索中,请稍后..."); } /** * 置为结束检索状态 */ function overLoad(){ $(t+" .pgRefresh").removeClass("pgLoad"); $(t+" .pgSearchInfo").html('检索到 ' + totalRecord + ' 条记录,显示第 <span class="pgStartRecord">' + startRecord + '</span> 条 - 第 <span class="pgEndRecord">' + endRecord + '</span> 条记录'); $(mask).remove(); //$(mask).fadeOut("slow"); } /** * 获得远程数据 */ function getRemoteData(){ startLoad(); $.ajax( { type: "POST", url: proxyUrl + "?startrecord="+gpStartRecord+"&endrecord="+gpEndRecord , cache: false, data: ajaxParam, dataType: "script", timeout: 30000, success: function(msg){ eval(msg); getStartEnd(); loadData(); refresh(); overLoad(); }, error: function(){ alert("请求失败或超时,请稍后再试!"); overLoad(); return; } } ) } /** * 获得当前页开始结束记录 */ function getStartEnd(){ if(groupSize){ startRecord = (currentPage-1)*perPage+1 - gpStartRecord + 1; endRecord = Math.min(currentPage*perPage,totalRecord) - gpStartRecord + 1; }else{ startRecord = (currentPage-1)*perPage+1; endRecord = Math.min(currentPage*perPage,totalRecord); } } /** * 获得当前组开始结束页码 */ function getGroupStartEnd(){ if(groupSize==null) return; var groupId = Math.ceil(currentPage/groupSize); gpStartPage = (groupId-1)*groupSize+1; gpEndPage = Math.min(groupId*groupSize,totalPage); gpStartRecord = (gpStartPage-1)*perPage+1; gpEndRecord = Math.min(gpEndPage*perPage,totalRecord); } /** * 刷新数据容器 */ function loadData(){ var view = ""; for(var i=startRecord-1;i<=endRecord-1;i++) view += dataStore[i]; valContainer.html(view); } /** * 刷新工具栏状态 */ function refresh(){ //当前页码写入cookie $.cookie(t+'_currentPage', currentPage); $.cookie(t+'_perPage', perPage); valCurrentPage.val(currentPage); valStartRecord.html(startRecord); valEndRecord.html(endRecord); valTotalPage.html(totalPage); btn.unbind("mousedown",pressHandler); btn.bind("mouseup",unpressHandler); btn.bind("mouseout",unpressHandler); if(currentPage == totalPage){ enabled(); btnBack.bind("mousedown",pressHandler); btnNext.addClass("pgNextDisabled"); btnLast.addClass("pgLastDisabled"); }else if(currentPage == 1){ enabled(); btnGo.bind("mousedown",pressHandler); btnPrev.addClass("pgPrevDisabled"); btnFirst.addClass("pgFirstDisabled"); }else{ enabled(); btnBack.bind("mousedown",pressHandler); btnGo.bind("mousedown",pressHandler); btnNext.addClass("pgNext"); btnPrev.addClass("pgPrev"); btnFirst.addClass("pgFirst"); btnLast.addClass("pgLast"); } } /** * 移除按钮disabled状态样式 */ function enabled(){ btnNext.removeClass("pgNextDisabled"); btnPrev.removeClass("pgPrevDisabled"); btnFirst.removeClass("pgFirstDisabled"); btnLast.removeClass("pgLastDisabled"); } /** * 添加按钮按下状态样式 */ function pressHandler(){ $(this).addClass("pgPress"); } /** * 移除按钮按下状态样式 */ function unpressHandler(){ $(this).removeClass("pgPress"); } }
pgdataproxy.jsp
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%> <%@page import="java.net.URLDecoder"%> <%@page import="java.awt.Robot"%> <% if(request.getParameter("money")!=null){ String a = request.getParameter("money"); System.out.println(URLDecoder.decode(a,"UTF-8")); } int start = Integer.parseInt(request.getParameter("startrecord")); int end = Integer.parseInt(request.getParameter("endrecord")); List store = (List)session.getAttribute( "news" ); String content = "dataStore = ["; for(int i=start-1;i<end;i++){ content += "\""+store.get( i )+"\","; } content = content.substring(0,content.length()-1); content += "];"; Robot r = new Robot(); r.delay(2000); out.println(content); %>
/*action传到此jsp页面一个list即可*/
page.jsp
//==============展示jQuery分页效果页面==========================
<%@ page language="java" import="java.util.*" pageEncoding="GBK" isELIgnored="false" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jQuery Ajax分页</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <link rel="stylesheet" type="text/css" href="css/pagination.css"> <style> body,div { font-size:13px; font-family:Verdana; } .pgContainer { background-color:#F9F9F9; padding:10px; line-height:20px; } #pagetest5 .pgContainer { color:#93A5B3; background:url(desk.jpg); } hr { margin:10px 0 10px 0; border:0; border-top:1px dashed #CCCCCC; height:0; } h3 { margin:5px 0; font-size:14px; } </style> </head> <script type="text/javascript" src="js/jquery-1.2.3.pack.js"></script> <script type="text/javascript" src="js/jquery.cookie.js"></script> <script type="text/javascript" src="js/pagination.js"></script> <script type="text/javascript"> /*$(document).ready(function(){ $("#pagetest").pagination({totalRecord:${p},proxyUrl:'data.action'}); });*/ //=======================AJax静态分页================================= /*$(document).ready(function(){//分页测试 //demo1带参数 var param = { "money":encodeURI($("#money").val()) }; $("#pagetest").pagination({totalRecord:$("#results").val(),proxyUrl:'data.jsp',groupSize:4,barPosition:'bottom',ajaxParam:param}); });*/ $(document).ready(function(){ var param = { "money":encodeURI($("#money").val()) }; //调用jQuery分页插件方法 $("#page").pagination({totalRecord:$("#results").val(),proxyUrl:'data.jsp',groupSize:4,barPosition:'bottom',ajaxParam:param}); }); </script> <body> <input type="text" id="money" value="测试参数"/> <div style="width:750px;"> <h3>Demo1(底部显示工具条):</h3> <!--分页测试 <div id="pagetest" style="border:1px solid #DADADA;"> </div> --> <div id="page" style="border: 1px solid #DADADA;"></div> <input type="hidden" name="results" id="results" value="${results}" /> </div> </body> </html>
评论
3 楼
xmwjfid
2012-10-16
写的不错,就是有个疑问groupSize 这个用来干什么?
2 楼
xianzi_2008
2011-12-30
1 楼
system1029hq
2011-07-18
发表评论
-
jquery实现可编辑的表格
2011-09-05 17:02 1811今天来演示一个用jquery完成的效果:可编辑的表格。 1. ... -
HTTP状态码及其含义
2011-06-07 14:23 1220作者:King_wangyao 来自:Internet 导 ... -
javaScript表单验证大全
2011-05-23 11:57 1086一、基本验证1.1. 长度限制<script> ... -
107个JS基础,Web程序员开发必备
2011-05-23 11:49 9301.document.write(""); ... -
JQUERY 对象与DOM对象之转换
2011-05-03 16:41 1205转换案例: 获取JQUERY对象的方法 var jqueryO ... -
摘抄: 判断cookie是否开启
2011-04-11 00:37 1031方法一: 无论何时你在两页之间,有一个非常简单可靠的方 ... -
在js类中 setTimeout() 和 setInterval() 的使用方法详解
2011-04-11 00:34 1214setTimeout(表达式,延迟时间); 单位:m ... -
jQuery:一次失败的优化尝试
2011-04-10 14:30 928jQuery:一次失败的优化尝试 我经常抱怨jQ ... -
JS截取字符串
2011-04-10 11:34 1117使用 substring()或者slice() 函数:sp ... -
jQuery获取Select选择的Text和 Value(转)
2011-04-09 13:45 1565jQuery获取Select选择的Text ... -
jQuery之ajax post篇dff
2011-04-07 22:38 1205jQuery真的是一个不错的东西,感觉比prototype处理 ... -
javascript 技巧
2011-04-07 00:02 9721,将变量转换为字符串的办法。 var a=" ... -
十一种刷新按钮的方法
2011-04-06 13:29 1038十一种刷新按钮的方法: <input type=butt ... -
HTML a 标签的 target 属性
2011-04-06 13:23 1354HTML <a> 标签的 target 属性 定 ... -
JS实现刷新iframe的方法
2011-04-06 13:16 1321<iframe src="1.htm&qu ... -
“HTTP”协议
2011-04-05 20:15 2537打开“HTTP”协议 仔细 ... -
常用表单验证函数
2011-04-05 01:25 1167******函数说明****** * * isEmail( ... -
网页中嵌入脚本有两种方式
2011-04-05 01:21 1243网页中嵌入脚本有两种方式: 1、使用<Script> ... -
网页制作之HTML基础知识
2011-04-05 00:09 1063网页制作之HTML基础知识 作者:king_wangyao ... -
HTML-MARQUEE基本语法
2011-04-05 00:07 1025基本语法 <marquee> ... </ ...
相关推荐
在这个实例中,我们将探讨如何使用 `jquery.pagination.js` 实现三种不同的分页形式:基本分页、AJAX 无刷新分页以及自定义分页属性。 **基本分页** 基本分页是最简单的应用场景,通常用于展示固定数量的数据集。...
**jQueryPager:基于JQuery的Ajax分页插件Pagination实现** 在Web开发中,当数据量庞大时,分页是一种常见的优化用户体验的方式。jQueryPager是一款轻量级的jQuery分页插件,它允许开发者通过Ajax无刷新的方式实现...
jQuery.pagination.js是一个专门用于分页的jQuery插件,它提供了易于使用的API和自定义选项,例如每页显示的条目数、样式设置、分页链接的行为等。这个插件可以帮助开发者快速实现无刷新分页功能,无需从头编写复杂...
jQuery分页插件Pagination是一个强大的工具,用于在网页中实现高效的数据分页功能。它以其灵活性、可定制性和丰富的功能而受到开发者的欢迎。在网页设计中,当数据量过大时,分页是必不可少的,它能帮助用户更有效地...
Jquery.Pagination.js + Jquery.Ajax + ASP.NET----无刷新分页Pagination 1.5.1,是在原作者基础上修改的,因为Pagination 1.5.1与它的低版本有很大的区别,所以在此实例中增加了新版的使用方法
首先,jQuery Pagination的基础工作原理是通过JavaScript动态生成分页链接,用户点击这些链接时,插件会根据设定的参数加载相应页码的数据。这个过程通常与服务器端的数据获取相结合,实现无刷新的分页效果。分页...
"jquery.pagination.js"是JavaScript实现的分页逻辑代码,它包含了分页插件的核心功能,如计算总页数、生成分页元素、处理用户交互等。开发者需要在HTML文档中引入这个脚本文件,通常是在`<head>`标签内通过`...
jquery.pagination.js插件,此jQuery插件为Ajax分页插件,一次性加载全部数据,故分页切换时无刷新与延迟,只是重写指定dom元素中的html内容,如果数据量较大不建议用此方法,因为加载会比较慢; jQuery的多数插件...
《jQuery.jqpagination.js分页插件:打造高效网页浏览体验》 在网页设计与开发中,分页功能是不可或缺的一部分,特别是在数据量庞大、页面元素过多的情况下,它能够帮助用户更加有效地浏览和导航。jQuery....
此源码使用了Jquery.Pagination.js+Jquery.Ajax+Asp.net技术实现了无刷新分页的效果。其中用到的Asp.net知识有Linq to sql和ashx技术。分页插件可以自定义样式,自定义的样式在pagenumstyle.css文件中。项目使用vs...
`jQuery Pagination Plugin`是针对jQuery设计的一个Ajax分页插件,用于实现高效且用户友好的分页功能。 ### jQuery分页插件的基本概念 1. **Ajax**:异步JavaScript和XML,允许页面与服务器进行通信,更新部分页面...
jQuery Pagination Ajax 分页插件,本插件实现的分页效果适合移动版和PC版,Ajax在不实现刷新网页的情况下,控制内容分页显示,实现这一功能,需要前台和后台两者结合 ,前台也就是本款代码所展现的功能,实现Ajax的...
AJAX(Asynchronous JavaScript and XML)允许我们在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容,而`jquery.pagination.js`则提供了简洁的分页解决方案。 首先,我们需要理解AJAX的工作原理。AJAX...
**jQuery Paginate.js 分页插件详解** 在Web开发中,数据展示往往涉及到大量的记录,为了提高用户体验,分页是一种常见的处理方式。`jQuery Paginate.js` 是一个轻量级的jQuery分页插件,它使得在网页上实现美观且...
jQueryPager是一款基于jQuery库的轻量级分页插件,主要用于网页内容的Ajax分页加载。在网页设计中,分页是一种常见的用户界面元素,它允许用户浏览大量数据时,按页浏览,而不是一次性加载所有内容,从而提高网页...
在介绍使用jquery分页插件jquery.pagination.js实现无刷新分页的知识点之前,首先要明确什么是分页插件,以及无刷新分页的概念。分页插件是一种用于在网页上实现内容分页展示的工具,它能够将大量数据或内容分成多页...
本压缩包“功能强大的ajax方式jQuery前端分页插件pagination.zip”提供了一个高效、易用的分页解决方案,特别适用于需要大量数据分批加载的Web应用。 该插件名为“pagination”,它利用Ajax技术实现了前端分页功能...