基于jQuery的js分页代码_jquery

复制代码 代码如下:

function pagerBar(dataCount,pageSize,serverUrl,contentPlace,pagerbarPlace,callBack){
this.dataCount = dataCount;
this.pageSize = pageSize;
this.serverUrl = serverUrl;
this.contentPlace = $("#"+contentPlace);
this.pagerbarPlace = $("#"+pagerbarPlace);
this.callBack = callBack;

this.pageCount = 0;
this.pageIndex = 1;
this.curInfo = $("<span/>");
this.prePage = $("<span/>");
this.nextPage = $("<span/>");
this.init();
}
pagerBar.prototype = {
init : function(){
this.getPageCount();
this.initLink();
this.showBarInfo();
if(this.pageCount>0){
this.setLink(1);
}
},
getPageCount : function(){
this.pageCount = parseInt(this.dataCount / this.pageSize);
if(this.dataCount % this.pageSize !=0){
this.pageCount++;
}
},
initLink : function(){
var self = this;
this.prePage = $("<span/>").html("上一页").addClass("pageLink");
this.prePage.click(function(){
self.setLink(self.pageIndex-1);
});
this.nextPage = $("<span/>").html("下一页").addClass("pageLink");
this.nextPage.click(function(){
self.setLink(self.pageIndex+1);
});
this.pagerbarPlace.append(this.curInfo).append(this.prePage).append(this.nextPage);
},
showBarInfo : function(){
this.prePage.hide();
this.nextPage.hide();

if(this.pageCount==0){
this.curInfo.html("暂时没有信息!");
}
else if(this.pageCount==1){
this.curInfo.html("1/1");
}
else{
this.curInfo.html(this.pageCount + "/" + this.pageIndex);
}

},
setLink : function(i){
var self = this;
$.ajax({
url:self.serverUrl,
type:"get",
data:{pageSize:self.pageSize,pageIndex:i},
cache:false,
error:function(){
alert("数据加载失败!");
},
success:function(htmlData){
self.contentPlace.html(htmlData);
if(self.pageCount==1){
self.prePage.hide();
self.nextPage.hide();
}else{
if(i==1){
self.prePage.hide();
self.nextPage.show();
}else if(i==self.pageCount){
self.prePage.show();
self.nextPage.hide();
}else{
self.prePage.show();
self.nextPage.show();
}
}
self.pageIndex = i;
self.curInfo.html(self.pageCount+"/"+self.pageIndex);
if(self.callBack){
self.callBack();
}
}
});
},
changeServerUrl : function(dataCount,serverUrl){
this.dataCount = dataCount;
this.serverUrl = serverUrl;
this.pageIndex=1;

this.getPageCount();
this.showBarInfo();
this.contentPlace.html("");
if(this.pageCount>0){
this.setLink(1);
}
},
dataCountDec : function(){
this.dataCount--;
this.getPageCount();
if(this.pageCount<this.pageIndex){
this.pageIndex = this.pageCount;
}
if(this.pageIndex>0){
this.setLink(this.pageIndex);
}
this.showBarInfo();
}
}

时间: 2024-10-14 03:19:47

基于jQuery的js分页代码_jquery的相关文章

基于jQuery ligerUI实现分页样式_jquery

在公司实习看到公司框架里使用了ligerUI的grid进行分页,个人感觉挺好用的,自己摸索着实现了一遍记录下来  简单来说,liger grid 就是提交准备好的数据到指定的目标请求数据,拿到数据以后,显示出来(通过ajax实现).  ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序.分页.多表头.固定列等等.  这里只实现基于ligerUI的分页  LigerUI的分页方式有两种:local和server. 如果数据量不是很大,就直

基于JQUERY的多级联动代码_jquery

jquery.select.more.js 复制代码 代码如下: (function($){ $.fn.doselectmore = function(settings) { var dfop ={ namekey: "name", pnamekey: "name", idkey: "id", selectname:"sel", method: "POST", datatype: "json&qu

基于jquery的时间段实现代码_jquery

json字符串: 复制代码 代码如下: var mcode={"minfo":[{"time":"9:00-10:00","status":2},{"time":"10:00-11:00","status":1},{"time":"11:00-12:00","status":3},{"time&qu

基于jquery的Repeater实现代码_jquery

如何实现一个js版的repeater? Asp.net WebForm的repeater控件挺好用,我想用js实现一个在Ajax应用中也该还不错!半年前做了一个jQuery.Repeater插件,并用在了一个项目中,如今拿来晒晒! 原理 项模板为HTML代码,插件接收json数据源,读取模板并创新每一项. 模板HTML 复制代码 代码如下: <ul id='repeater1'> <li class='itemtempplate'>{列名}</li> </ul&g

基于jQuery的倒计时实现代码_jquery

在线演示:http://demo.jb51.net/js/2012/mydaojishi/打包下载:mydaojishi_jb51核心代码: 复制代码 代码如下: $(function(){ var tYear = ""; //输入的年份 var tMonth = ""; //输入的月份 var tDate = ""; //输入的日期 var iRemain = ""; //开始和结束之间相差的毫秒数 var sDate =

基于jQuery的倒计时插件代码_jquery

剩余时间:1小时:40分:30秒 复制代码 代码如下: 1 /* * 倒计时插件,主要用来限时购买 * By wayshan 版本1.0 * 使用方法: * $(function(){ * $("#ElementId").countdown({ * Edate:"2012-12-21 15:14:23" * }); * }) */ ;(function($){ $.fn.countdown = function(options){ if (this.length =

基于jquery的动画效果代码_jquery

基于jQuery.Hz2Py.js插件实现的汉字转拼音特效_jquery

可以实现基于jQuery实现汉字转换成拼音代码.这是一款基于jQuery.Hz2Py.js插件实现的汉字转拼音特效.插件自行下载.使用方法如下(注意修改jq的引入路径). <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>基于jQuery实现汉字转换成拼音代码</title> <

基于jQuery.Hz2Py.js插件实现的汉字转拼音特效

jQuery.Hz2Py.js插件实现的汉字转拼音是一款很实用的在线转换功能,此插件已经把汉字打包成一个插件库,调用的时间很简单,只调用一个方法就可以实现转换了 可以实现基于jQuery实现汉字转换成拼音代码.这是一款基于jQuery.Hz2Py.js插件实现的汉字转拼音特效.插件自行下载.使用方法如下(注意修改jq的引入路径). ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30