zhanghh315
- 浏览: 16081 次
- 性别:
- 来自: 长春
-
最新评论
-
zhanghh315：
一直在纠结淘宝的秒杀究竟是怎么做到客户端和服务器端时间同步的， ...
客户端实现准确的服务器时间同步 [转] -
zhanghh315：
shenlm203 写道亲，没注意看你的center组件，不过 ...
js弹出框或者提示框居中显示 -
zhanghh315：
shenlm203 写道你至少弄个例子啊，要不然谢了谁看啊！全 ...
js分页 -
shenlm203：
亲，没注意看你的center组件，不过呢这个有点儿小意见。非I ...
js弹出框或者提示框居中显示 -
shenlm203：
js分页
做网站时，遇到需要js分页，网上找来找去，找不到合适的，索性自己写了一个，也不是什么特别高深的东西，拿出来和大家共享下，有好的想法，欢迎与我沟通交流，共勉！
对以前的分页进行了润色，这里附加例子和截图，亲们可以好好看看
core.js
KISSY.add('plugins/pagination/core', function(S,a,juicer,j,Pctrl) {
var
DOM = S.DOM, get = DOM.get, query = DOM.query, JSON = S.JSON, on = S.Event.on, IO = S.IO,
EMPTY_FUNCTION = function(){},
DEFAULT_THEME_PKG = {
showCounter: true,//定义是否显示分页中的计数部分
themeCounter: '({page})/({pageCount})',//计数部分样式
showJump: true,//定义是否显示分页中的点击按钮跳转部分
themeJump: '跳到第({input})页({button})',
showPageNum: true,//定义是否只需要展示上一页，下一页部分
themeCss: 'J_pagination_theme1',
firstPageTip: '<<',
lastPageTip: '>>',
prevPageTip:'<',
nextPageTip:'>'
}
config = {
renderTo:'',
juicerRender:'',
dataRender:'#J_template',
page: 1,//定义当前页
pageSize: 0,//定义每页显示的记录数
dataCount: 10000,//定义总记录数
pageCount: 0,
themePackageURL: '',//主题包访问地址
themeName: 'default',
type: 'get',
url:'',
extraParam: null,
sendData: function(){},
configUrl: function(url,page,extraParam){},
beforeDataLoad: EMPTY_FUNCTION,
afterDataLoad: EMPTY_FUNCTION,
initCompleted: EMPTY_FUNCTION,//初始化对象完成后的回调函数
beforeSendAJAX: EMPTY_FUNCTION,//获取数据ajax发送之前
errorFun: EMPTY_FUNCTION//ajax发送失败后的回调函数
};
THEME_URL = PW.libUrl + 'js/base/plugins/pagination/style.css';
S.getScript(THEME_URL,{charset:'utf-8'});
var pagination = function(param){
var cfg = S.clone(config);
this.opts = S.mix(cfg,param,true,[],true);
this.init();
};
pagination.prototype = {
/**
* 初始化函数
*/
init: function(){
var
that = this,
opts = that.opts;
that.prevPaginationData = null;
that._getThemePackage();
if(opts.initCompleted){
opts.initCompleted();//初始化完成后的函数
}
},
/**
* 重新加载页面，是一个外部方法
* @param 参数param是需要重新加载页面的分页新配置，没有可不写
*/
reload: function(param){
this.opts = S.mix(this.opts,param);
this.tDOM.html("");
this.init();
},
/**
* 更新分页显示，是一个外部方法，主要用于在添加或者删除记录的情况下，判断分页的页数是否需要改变
* @param 参数param是需要改变的分页的新配置
*/
refresh: function(param){
//更新dataCount
//计算分页
//执行toPage操作
this.opts = S.mix(this.opts,param);
var pageC = Math.ceil(this.opts.dataCount/this.opts.pageSize);
var that = this;
if(pageC != this.opts.pageCount){
that._sendAjax(this.opts.page);
}
},
_getThemePackage:function(){
var
that = this,
opts = that.opts,
tPURL = opts.themePackageURL;
if(tPURL && tPURL !== '' && tPURL !== null && tPURL !== undefined){
IO({
url:tPURL,
type:'get',
success:function(tp){
tp = (S.isString(tp))? S.JSON.parse(tp): tp;
var themeName;
if(opts.themeName){
themeName = opts.themeName;
}else{
themeName = 'default';
}
that.opts.themePackage = tp.pagination[themeName];
that.prevPaginationData;
that.pctrl = new Pctrl(opts);
that._sendAjax(opts.page);
},
error:function(a,b,c){
S.log('主题包获取失败,直接使用默认配置！');
opts.themePackage = DEFAULT_THEME_PKG;
that.prevPaginationData;
that.pctrl = new Pctrl(opts);
that._sendAjax(opts.page);
}
});
}else{
opts.themePackage = DEFAULT_THEME_PKG;
that.prevPaginationData;
that.pctrl = new Pctrl(opts);
that._sendAjax(opts.page);
}
},
_sendAjax: function(page){
var
that = this,
opts = that.opts,
URL;
if(!opts.timeout || opts.timeout == undefined || opts.timeout == '' || opts.timeout == null){
opts.timeout = 10;
}
IO({
type: opts.type,
url: opts.configUrl(that.opts.url,that.opts.page,that,that.prevPaginationData),
data: opts.extraParam,
timeout: opts.timeout,
/*beforeSend: function(){
if(opts.beforeSendAJAX){
opts.beforeSendAJAX(that);
}
},*/
success: function(data){
/*URL = opts.configUrl(that.opts.url,that.opts.page,that,that.prevPaginationData);
that.fire('beforeDataLoad',{url:URL,data:opts.extraParam});*/
data = (S.isString(data)) ? S.JSON.parse(data): data;
if(opts.beforeDataLoad){
opts.beforeDataLoad(that,data);
}
that.opts.sendData(that,data);
S.log(data);
//如果后台传dataCount过来就将传来的值指定给当前分页的dataCount
//如果没有传值，则使用默认的配置值
if(data.dataCount !== null && data.dataCount !== '' &&data.dataCount !== undefined){
opts.dataCount = data.dataCount;
}
opts.pageCount = Math.ceil(opts.dataCount/opts.pageSize);
var tpl = document.getElementById(opts.juicerRender).innerHTML;
that.prevPaginationData = data;
var html = juicer(tpl, data);
DOM.html(opts.dataRender,html);
DOM.html(opts.renderTo,'');
that.pctrl.refresh(opts.dataCount,page);
that._pageClick();
if(opts.afterDataLoad){
opts.afterDataLoad(that);
}
},
error: function(){
alert('获取数据失败！');
if(opts.errorFun){
opts.errorFun(that);
}
}
});
},
_pageClick:function(){
//绑定click事件
var
that = this,
opts = that.opts;
that.tDOM = $(opts.renderTo);
//点击首页
that.tDOM.find('#J_firstPage').click(function(){
if(!($(this).hasClass('disabled'))){
opts.page = 1;
that._sendAjax(opts.page);
}
});
//点击上一页
that.tDOM.find('#J_prevPage').click(function(){
if(!($(this).hasClass('disabled'))){
opts.page = opts.page - 1;
that._sendAjax(opts.page);
}
});
//点击下一页
that.tDOM.find('#J_nextPage').click(function(){
if(!($(this).hasClass('disabled'))){
opts.page = opts.page + 1;
that._sendAjax(opts.page);
}
});
//点击尾页
that.tDOM.find('#J_lastPage').click(function(){
if(!($(this).hasClass('disabled'))){
opts.page = opts.pageCount;
that._sendAjax(opts.page);
}
});
//点击指定的页码
that.tDOM.find(".J_page").each(function(){
if(!($(this).hasClass('check'))){
$(this).click(function(){
var val = $(this).children('span').text();
opts.page = parseInt(val);
that._sendAjax(opts.page);
});
}
});
//点击按钮进行跳转
that.tDOM.find('.J_btnGo').click(function(){
if($(this).prev('#pageNum').val() && $(this).prev('#pageNum').val() !== '' && $(this).prev('#pageNum').val() !== null){
var p = $(this).prev('#pageNum').val();
p = parseInt(p);
if(p > that.opts.pageCount){
opts.page = opts.pageCount;
}else if(p < 1){
opts.page = 1;
}else if(isNaN(p)){
opts.page = 1;
}else{
opts.page = p;
}
that._sendAjax(opts.page);
}
});
},
_toPage: function(page){
page = parseInt(page);
this.opts.page = page;
this.tDOM.html("");
this.pctrl.refresh(this.opts.dataCount,this.opts.page);
}
}
return pagination;
}, {
requires : ['thirdparty/jquery','plugins/juicer','core','pagination/Pctrl']
});
KISSY.add('pagination/Pctrl',function(S){
var
DOM = S.DOM, get = DOM.get, query = DOM.query, JSON = S.JSON, on = S.Event.on, io = S.io,
config = {
renderTo:'',
pageSize: 10,
showCounter: true,
showJump: true,
showPageNum: true,
themePackage: { //当前分页的主题包
themeCss: 'J_pagination_theme1',
showCounter: true,//定义是否显示分页中的计数部分
themeCounter: 'Page({page})of({pageCount})',//计数部分样式
showJump: true,//定义是否显示分页中的点击按钮跳转部分
themeJump: '跳到第({input})页({button})',
showPageNum: true,//定义是否只需要展示上一页，下一页部分
firstPageTip: '<<',
lastPageTip: '>>',
prevPageTip:'<',
nextPageTip:'>'
}
};
function Pctrl(param){
this.opts = S.mix(config,param,true,[],true);
this.page = 1;
}
S.augment(Pctrl,S.EventTarget);
S.augment(Pctrl,{
_init:function(){},
refresh: function(dataCount,page){
//计算页数，然后根据页数获取html
var
that = this,
opts = that.opts;
opts.dataCount = dataCount;
opts.pageCount = Math.ceil(opts.dataCount/opts.pageSize);
that._checkPage(page);
var html = that._generateHTML(page);
var d = $(this.opts.renderTo).append(html);
$(this.opts.renderTo).addClass(opts.themePackage.themeCss);
that._addEvt(d);
},
_addEvt: function(html){
this._checkPage();
d = DOM.create(html);
return d;
},
/**
* 配置处理函数，对配置项里面的主题配置进行处理，提取出需要的内容
*/
_configHandel:function(){
var
that = this,
opts = that.opts;
this.themeCounter = opts.themePackage.themeCounter;
this.themeCounter = this.themeCounter.replace('({page})',' '+this.opts.page+' ');
this.themeCounter = this.themeCounter.replace('({pageCount})',' '+this.opts.pageCount+' ');
this.themeJump = opts.themePackage.themeJump;
this.themeJump = this.themeJump.replace('({input})','<input type="text" id="pageNum" name="pageNum" class="goTo" value="" />');
this.themeJump = this.themeJump.replace('({button})','<button class="J_btnGo">go</button>');
},
/**
* 拼装分页html
*/
_generateHTML: function(page){ //
var
strHtml = '',
opts = this.opts,
endPage = 0;
opts.page = page;
var
prevPage = parseInt(opts.page) - 1,
nextPage = parseInt(opts.page) + 1;
this._configHandel();
if(opts.themePackage.showCounter == true){
strHtml += '<span class="count">'+this.themeCounter+'</span>';
}
if (prevPage < 1) {
strHtml +=
'<span id="J_firstPage" class="firstPage disabled" title="First Page">'+opts.themePackage.firstPageTip+'</span>';
strHtml +=
'<span id="J_prevPage" class="prevPage disabled" title="Prev Page">'+opts.themePackage.prevPageTip+' </span>';
} else {
strHtml +=
'<a><span id="J_firstPage" title="First Page">'+opts.themePackage.firstPageTip+'</span></a>';
strHtml +=
'<a><span id="J_prevPage" title="Prev Page">'+opts.themePackage.prevPageTip+' </span></a>';
}
if (opts.page != 1 && opts.themePackage.showPageNum == true) strHtml += '<a class="J_page"><span title="Page 1">1</span></a>';
if (opts.page >= 5 && opts.themePackage.showPageNum == true) strHtml += '<span class="until">...</span>';
if (opts.pageCount > opts.page + 2) {
endPage = opts.page + 2;
} else {
endPage = opts.pageCount;
}
for (var i = opts.page - 2; i <= endPage; i++) {
if (i > 0) {
if (i == opts.page && opts.themePackage.showPageNum == true) {
strHtml += '<span title="Page ' + i + '" class="check">' + i + '</span>';
}else {
if (i != 1 && i != opts.pageCount && opts.themePackage.showPageNum == true) {
strHtml += '<a class="J_page"><span title="Page ' + i + '">' + i + '</span></a>';
}
}
}
}
if (opts.page + 3 < opts.pageCount && opts.themePackage.showPageNum == true) strHtml += '<span class="until">...</span>';
if (opts.page != opts.pageCount && opts.themePackage.showPageNum == true) strHtml += '<a class="J_page"><span title="Page ' + this.opts.pageCount + '">' + this.opts.pageCount + '</span></a>';
if (nextPage > opts.pageCount) {
strHtml += '<span id="J_nextPage" class="nextPage disabled" title="Next Page"> '+opts.themePackage.nextPageTip+'</span>';
strHtml += '<span id="J_lastPage" class="lastPage disabled" title="Last Page">'+opts.themePackage.lastPageTip+'</span>';
} else {
strHtml += '<a><span id="J_nextPage" title="Next Page"> '+opts.themePackage.nextPageTip+'</span></a>';
strHtml += '<a><span id="J_lastPage" title="Last Page">'+opts.themePackage.lastPageTip+'</span></a>';
}
if(opts.themePackage.showJump == true){
strHtml += this.themeJump;
}
strHtml += '<br/>';
if(opts.pageCount <= 1){
strHtml = '';
}
return strHtml;
},
/**
* 对当前页数和总页数进行验证
*/
_checkPage: function(){
var
opts = this.opts;
//当前页数为非数字，则当前页数置为1
if (isNaN(parseInt(opts.page))) opts.page = 1;
//总页数为非数字，则将总页数置为1
if (isNaN(parseInt(opts.pageCount))) opts.pageCount = 1;
if (opts.page < 1) opts.page = 1;
if (opts.pageCount < 1) opts.pageCount = 1;
if (opts.page > opts.pageCount) opts.page = opts.pageCount;
opts.page = parseInt(opts.page);
opts.pageCount = parseInt(opts.pageCount);
}
});
return Pctrl;
},{
requires:['core','thirdparty/jquery']
});
pagination.js
KISSY.add('mod/pagination',function(S,pagination){
PW.pagination = function(param){
return new pagination(param);
}
},{requires:['plugins/pagination/core']});
pagination.html
<script type="text/javascript">
KISSY.use('plugins/pagination/core', function(S,pagination) {
S.ready(function(){
var p = new pagination({
renderTo: '#J_pagination',//分页显示指向
juicerRender: 'tpl',//模版渲染指向
dataRender: '#J_template',
pageSize: 5,//每页显示的记录数
dataCount: 50,//总记录数
themePackageURL: PW.libUrl+'js/base/plugins/pagination/theme/theme.json',
themeName: 'a',//主题名称,有default,a,b,c,d,e这几种，默认是default
url:'data.json',//必选，必须指定ajax的url
type: 'get',//可选，默认情况下是get
extraParam: {},//获取分页数据列表的额外条件
sendData: function(me,b){}, //回调函数 me指向当前的分页对象，b指向分页获取的json数据
configUrl:function(url,page,me,prevdata){//url:配置的url,page:当前的页面,me:指向当前分页,prevdata:上一次的分页数据
//var url = url+'/page/'+page+'/'+me.opts.extraParam.fromDate+'/'+me.opts.extraParam.toDate;
return url;
},
//初始化完成之后的回调函数
initCompleted:function(me){
S.log('初始化完成！');
},
//发送ajax之前
beforeSendAJAX:function(me){
S.log('发送ajax之前！');
},
//ajax发送失败后的回调函数
errorFun:function(me){
S.log('ajax发送失败！');
},
beforeDataLoad:function(me,data){
}
});
});
});
</script>
主题包设置：
{"pagination":{"default":{"showCounter":true,"themeCounter":"Page({page})of({pageCount})","showJump":true,"themeJump":"跳到第({input})页({button})","showPageNum":true,"themeCss":"J_pagination_theme1","firstPageTip":"首页","lastPageTip":"尾页","prevPageTip":"<","nextPageTip":">"},"a":{"showCounter":true,"themeCounter":"({page})/({pageCount})","showJump":true,"themeJump":" goto({input})页({button})","showPageNum":true,"themeCss":"J_pagination_theme5","firstPageTip":"首页","lastPageTip":"尾页","prevPageTip":"<","nextPageTip":">"},"b":{"showCounter":true,"themeCounter":"({page})/({pageCount})","showJump":false,"themeJump":"跳到第({input})页({button})","showPageNum":false,"themeCss":"J_pagination_theme2","firstPageTip":"<<","lastPageTip":">>","prevPageTip":"<","nextPageTip":">"},"c":{"showCounter":true,"themeCounter":"({page})/({pageCount})","showJump":true,"themeJump":" 跳到第({input})页({button})","showPageNum":true,"themeCss":"J_pagination_theme3","firstPageTip":"<<","lastPageTip":">>","prevPageTip":"<","nextPageTip":">"},"d":{"showCounter":true,"themeCounter":"({page})/({pageCount})","showJump":true,"themeJump":" goto({input})页({button})","showPageNum":true,"themeCss":"J_pagination_theme4","firstPageTip":"<<","lastPageTip":">>","prevPageTip":"<","nextPageTip":">"},"e":{"showCounter":true,"themeCounter":"({page})/({pageCount})","showJump":true,"themeJump":" goto({input})页({button})","showPageNum":true,"themeCss":"J_pagination_theme4","firstPageTip":"<<","lastPageTip":">>","prevPageTip":"<","nextPageTip":">"}}}
实际运行的效果如附件
有好的想法欢迎留言
- 大小: 4.9 KB
分享到：
评论
3 楼
zhanghh315
2012-09-18
shenlm203 写道
你至少弄个例子啊，要不然谢了谁看啊！
全部都拿出来，出问题谁负责啊，笨蛋！
2 楼
shenlm203
2012-09-18
1 楼
shenlm203
2012-09-18
你至少弄个例子啊，要不然谢了谁看啊！
发表评论
-
分页 v2.0.0
2014-05-10 16:44 182个多月的 ... -
客户端实现准确的服务器时间同步 [转]
2014-04-16 11:35 2515一、问题描述 需要解决的问题很简单，就是如何在页面上比较准 ... -
[转]js事件大全
2014-03-19 20:50 425一般事件 事件 onClick ... -
转：pjax：ajax和pushState结合的js库
2012-11-28 19:02 3pajax是使用ajax+pushState打造无刷新改 ... -
【转】jquery ajax多次请求数据时 不刷新问题
2012-07-14 17:03 1558jquery的ajax在频繁请求数据时，或者重复请求数据的时会 ...
相关推荐
js分页
自己写的一个js分页控件.已经封装,可以直接使用. 适合各种用途的分页控制. 如果界面不够美观,只需要修改css即可.
javascript 分页
Javascript我v页效果（收集了很多强大的JS分页代码），可以直接使用，不会JS的也能在自己网站上应用到强大的JS分页特效
纯js分页,用js将内容以分页的形式展现出来，处理数据更简单
这是一个适配所有浏览器的js分页插件，我一直在用，简单方便轻量，重点是适配所有浏览器,适配所有浏览器,适配所有浏览器
js分页功能 js分页功能js分页功能 js分页功能js分页功能 js分页功能
js分页示例,前台分页，客户端分页，分页机制，js分页
关于js分页的实例，asp服务端返回数据！
此示例实现的效果是分页，采用原生JavaScript实现的js分页效果+图片运动效果，希望和大家一起学习交流，有指教的地方请留言给我，谢谢。
比较基础的JS分页，基于jQuery的插件，写的不好，还望见谅。。
漂亮的js分页效果，模仿淘宝的分页，超漂亮
ASP分页代码都得熟悉，JS分页代码你熟悉吗？精心集的分页代码。
最原始js分页，不用任何插件，适合初学者参考学习使用
一个简单的js分页
Ext_Js分页显示案例详解
简单易懂的js分页，已经分装好，通俗易懂
前段时间因工作的需要整理了一份JS分页技术，撒是经典。希望在工作对网页程序员有点帮助。
自制纯js分页工具,花了点时间自己写的,比pagination更纯净更微型