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 相关文章推荐
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
摘自百度的图片轮换效果代码
Nov 19 Javascript
基于jquery的bankInput银行卡账号格式化
Aug 22 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
jQuery插件制作的实例教程
May 16 Javascript
js实现简单的网页换肤效果
Jan 18 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
vue 优化CDN加速的方法示例
Sep 19 Javascript
微信小程序云开发之使用云函数
May 17 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 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
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
使用PHP开发留言板功能
2019/11/19 PHP
PHP 图片处理
2020/09/16 PHP
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
javascript实现网页端解压并查看zip文件
2015/12/15 Javascript
js严格模式总结(分享)
2016/08/22 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
2018/12/13 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
Python实现识别手写数字大纲
2018/01/29 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
Spartoo葡萄牙鞋类网站:线上销售鞋履与时尚配饰
2017/01/11 全球购物
澳大利亚药房在线:ThePharmacy
2017/10/04 全球购物
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
三好生演讲稿
2014/09/12 职场文书
2015年公务员转正工作总结
2015/04/24 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
Python 数据可视化之Matplotlib详解
2021/11/02 Python
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python