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 相关文章推荐
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
May 08 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
May 08 Javascript
angularjs 中$apply,$digest,$watch详解
Oct 13 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
Jul 03 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
Sep 08 Javascript
深入理解react-router 路由的实现原理
Sep 26 Javascript
了解前端理论:rscss和rsjs
May 23 Javascript
微信小程序canvas分享海报功能
Oct 31 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 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中global和$GLOBALS[]的分析之一
2012/02/02 PHP
在PHP中运行Linux命令并启动SSH服务的例子
2014/06/12 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
基于PHP-FPM进程池探秘
2017/10/17 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
设定php简写功能的方法
2019/11/28 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
初始Nodejs
2014/11/08 NodeJs
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
python调用Delphi写的Dll代码示例
2017/12/05 Python
使用Python设计一个代码统计工具
2018/04/04 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
一套C++笔试题面试题
2012/06/06 面试题
大专毕业生自我鉴定
2013/11/21 职场文书
写给保洁员表扬信
2014/01/08 职场文书
学生保证书范文
2014/04/28 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
呐喊读书笔记
2015/06/30 职场文书
Win11 21h2可以升级22h2吗?看看你的电脑符不符合要求
2022/07/07 数码科技