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 相关文章推荐
javascript实现动态CSS换肤技术的脚本
Jun 29 Javascript
模拟电子签章盖章效果的jQuery插件源码
Jun 24 Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
jQuery模拟窗口抖动效果
Mar 15 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
Dec 28 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
Apr 23 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
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
php实现zip文件解压操作
2015/11/03 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
jquery+json实现数据列表分页示例代码
2013/11/15 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
js鼠标经过tab选项卡时实现切换延迟
2017/03/24 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
Vue根据条件添加click事件的方式
2019/11/09 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
python通过索引遍历列表的方法
2015/05/04 Python
深入浅出学习python装饰器
2017/09/29 Python
Django在pycharm下修改默认启动端口的方法
2019/07/26 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
python如何求100以内的素数
2020/05/27 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
安德玛比利时官网:Under Armour比利时
2019/08/28 全球购物
GAZMAN官网:澳大利亚领先的男装品牌
2019/12/19 全球购物
倡议书的写法
2014/08/30 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
违纪检讨书范文
2015/01/27 职场文书
民事答辩状范本
2015/05/21 职场文书
志愿者工作心得体会
2016/01/15 职场文书
创业计划书之美甲店
2019/09/20 职场文书
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫