Ajax搜索结果页面下方的分页按钮的生成


Posted in Javascript onApril 05, 2012

时间紧木有做成JQ插件,通用性可能差一些但是基本功能是有的,比较适合初学者,望老鸟大虾表拍砖才好
哦少说了一句我用的是 JQueryUI里面的button感觉还不错
下图是第一页的样子
Ajax搜索结果页面下方的分页按钮的生成
这是最后一页的样子
Ajax搜索结果页面下方的分页按钮的生成
废话不说了上代码上面有参数说明看不懂的欢迎留言

//------------------------------------------------------ 
// pageingBtn() 分页按钮的显示方法 
// pageIndex: 当前第几页 
// maxPage: 翻页数据集共有多少页 
// btnSize: 最多显示按钮数 
// pageSize: 分页数 
// keyWord: 关键词 
// container: 被填充的容器 
//------------------------------------------------------ 
function pageingBtn(pageIndex, maxPage, btnSize, pageSize, keyWord, container) { 
var BtnList = ''; 
$(container).html(''); 
if (pageIndex != 1) { 
BtnList += '<button value="1" class="firstPage"> 第一页 </button>'; 
var prevPageIndex = ((pageIndex - 1) < 1 ? 1 : (pageIndex - 1)); 
BtnList += '<button value="' + prevPageIndex + '" class="prevPage" > 上一页 第' + prevPageIndex + '页</button>'; 
} 
//此处设置当前页显示的样式 
var pageIndexStyle = ' class="pageIndex"'; //设定按钮的起始值 
var start = (pageIndex - (btnSize / 2 | 0) > 0) ? (pageIndex - (btnSize / 2 | 0)) : 1; 
//如果按钮起始值+最多显示按钮数的和大于最大页数就将按钮起始值设置为最大页数减去起始值加一 
if ((start + btnSize) > maxPage) { 
start = maxPage - btnSize + 1 
} //这里处理的情况是如果你的最大显示按钮数为15那么当数据分页最大值为小于15的时候按钮将会出现-7,-6,-5,-4...0,1,2,3,4等很扯的情况 
start = (start <= 0 ? 1 : start); 
for (var i = start; i < start + btnSize; i++) { 
if (i > maxPage) { 
break; 
} 
if (i == pageIndex) { 
BtnList += '<button value="' + i + '"' + pageIndexStyle + '> ' + i + ' </button>'; 
} 
else { 
BtnList += '<button value="' + i + '" > ' + i + ' </button>'; 
} 
} 
if (pageIndex < maxPage) { 
var nextPageIndex = ((pageIndex + 1) > maxPage ? maxPage : (pageIndex + 1)); 
BtnList += '<button value="' + nextPageIndex + '" class="nextPage" > 下一页 第' + nextPageIndex + '页 </button>'; 
BtnList += '<button value="' + maxPage + '" class="endPage"> 最后一页 第' + maxPage + '页 </button>'; 
} 
$(container).append(BtnList); 
//绑定后生成的按钮事件 
$(container).find("button").button().click(function () { 
loadingimg(); 
$.post("/author/query/", 
{ 
'pageIndex': $(this).val(), 
'pageSize': pageSize, 
'order': 'DESC', 
'sort': '', 
'KeyWords': keyWord //$("#SearchText").val() 
}, 
function (data) { 
$("#SearchText").val(keyWord); 
LoadBookList(data); 
} 
); 
} 
); //在此处修改按钮样式 
$(".nextPage").button({ icons: { 
secondary: "ui-icon-seek-next" 
}, text: false 
}); 
$(".prevPage").button({ icons: { 
primary: "ui-icon-seek-prev" 
}, text: false 
}); 
$(".endPage").button({ icons: { 
secondary: "ui-icon-seek-end" 
}, text: false 
}); 
$(".firstPage").button({ icons: { 
primary: "ui-icon-seek-start" 
}, text: false 
}); 
$(".pageIndex ").css({ 'background': '#ff0000', 'color': '#ffffff' }); 
}
Javascript 相关文章推荐
qTip 基于JQuery的Tooltip插件[兼容性好]
Sep 01 Javascript
window.dialogArguments 使用说明
Apr 11 Javascript
jquery 简单应用示例总结
Aug 09 Javascript
Javascript 按位取反运算符 (~)
Feb 04 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 Javascript
JavaScript程序中的流程控制语句用法总结
May 23 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
JS实现判断数组是否包含某个元素示例
May 24 Javascript
jQuery之$(document).ready()使用介绍
Apr 05 #Javascript
javascript淡入淡出效果的实现思路
Mar 31 #Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 #Javascript
一个关于javascript匿名函数的问题分析
Mar 30 #Javascript
JavaScript 基础篇(一)
Mar 30 #Javascript
js确定对象类型方法
Mar 30 #Javascript
js 浏览器事件介绍
Mar 30 #Javascript
You might like
php中看实例学正则表达式
2006/12/25 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
21个值得收藏的Javascript技巧
2014/02/04 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
Python中模块与包有相同名字的处理方法
2017/05/05 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
Python装饰器模式定义与用法分析
2018/08/06 Python
django项目搭建与Session使用详解
2018/10/10 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
2016/07/19 HTML / CSS
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
授权委托书范本(单位)
2014/09/28 职场文书
三年级学生期末评语
2014/12/26 职场文书
清洁工工作总结
2015/08/11 职场文书
Python中常见的导入方式总结
2021/05/06 Python
新手入门Jvm-- JVM对象创建与内存分配机制
2021/06/18 Java/Android
Python编解码问题及文本文件处理方法详解
2021/06/20 Python
《异世界四重奏》剧场版6月10日上映 PV视觉图原创角色发表
2022/03/20 日漫