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 相关文章推荐
jquery $.getJSON()跨域请求
Dec 21 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 Javascript
Knockout text绑定DOM的使用方法
Nov 15 Javascript
JS控制日期显示的小例子
Nov 23 Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
ES6扩展运算符用法实例分析
Oct 31 Javascript
微信小程序实现单选功能
Oct 30 Javascript
Vue侦测相关api的实现方法
May 22 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
javascript实现支付宝滑块验证码效果
Jul 24 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 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 Smarty生成EXCEL文档的代码
2008/08/23 PHP
php生成excel文件的简单方法
2014/02/08 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
php与python实现的线程池多线程爬虫功能示例
2016/10/12 PHP
php实现获取农历(阴历)、节日、节气的类与用法示例
2017/11/20 PHP
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
Vue数据驱动模拟实现1
2017/01/11 Javascript
angular实现input输入监听的示例
2018/08/31 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python从入门到精通(DAY 3)
2015/12/20 Python
使用 pytorch 创建神经网络拟合sin函数的实现
2020/02/24 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
2018/02/05 HTML / CSS
adidas旗下高尔夫装备供应商:TaylorMade Golf(泰勒梅高尔夫)
2016/08/28 全球购物
The North Face北面德国官网:美国著名户外品牌
2018/12/12 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
数控专业推荐信范文
2013/12/02 职场文书
我为自己代言广告词
2014/03/18 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
工作作风建设心得体会
2014/10/22 职场文书
PL350与SW11的比较
2021/04/22 无线电
css position fixed 左右双定位的实现代码
2021/04/29 HTML / CSS
PyTorch的Debug指南
2021/05/07 Python