// SSH+jquery实现分页核心类
$.fn.page = function(options){
//设置默认参数值
var settings = {
size: 10,
url: "shop.do?ptype=findPager"
};
//获取传入参数值
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);
//alert(curPage);
//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].ShopUid + "</td><td>" + data.list[i].ShopUname + "</td>";
s+="<td>"+data.list[i].ShopUflag+"</td><td>"+data.list[i].ShopUpcode+"</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");
}
分享到:
相关推荐
pager.rar=jquery.pager.js+page.css+page.html Jquery分页例子
jquery很好的分页例子
jquery 分页详细例子 ajax无刷新
jQuery分页插件(实例详尽,简单易用
JQuery分页:使用JQuery分页插件实现分页.有源码,有数据库,本人测试过.请大家放心使用.在网上找了许多JQuery分页的例子,但都不完整,要么没数据库,寡人鄙视他们.
jquery分页大全包括ajax分页和非ajax分页以及滚动分页等七八种分页,里面包含例子。
分页、排序、检索 Datatable与json之间数据转换,一个详细完整的例子!,希望对大家有用。
应用jquery插件jPaginate的一个分页例子。
jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。 分页、排序、检索 Datatable与json之间数据转换,一个详细完整的例子!
存储过程之jQuery分页源码 完成了一个很简单的Demo,《基于存储过程的Ajax分页》方案。客户端通信用的是jQuery1.2.6这个版本。在底层框架设计部分,采用的是动软反射工厂。那么就实现了真正的封装了业务。因为我们只...
JQUERY分页,用JQUERY实现分页的一个简单例子
需要无刷新.刷新. 分页模式的同学都可以看看.这是本人利用课余写的一个jquery插件.大家可以发邮件给我平时比较忙.
bootstrap table分页例子 bootstrap table实现了2种分页方式。
jquery easyUI datagrid组件实现了单张表的增删改查及分页,后台使用servlet,数据库使用mysql
JQuery分页插件,带例子。 分享快乐你会更快乐。
jquery pagination 分页 插件 例子和源码
jquery插件和例子 图片播放器 lightbox thickbox 手风琴 树 分页jquery插件和例子 图片播放器 lightbox thickbox 手风琴 树 分页jquery插件和例子 图片播放器 lightbox thickbox 手风琴 树 分页
http://www.jq22.com/jquery-plugins分页-2-jq 下载的插件用自带的数据是可以的,但是采用ajax获取的json数据的时候会报错,所以我对插件进行了修改,成功实现。这个例子希望大家看懂自己来该,照抄不了。
mvc jquery Ajax,用户登录,无刷新分页。数据库为sql 2005备份文件,在sql 2005_bak文件夹下。各位前辈看了,对不合理的请指教。