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 parseInt字符转化为数字函数使用小结
Nov 05 Javascript
面向对象的Javascript之一(初识Javascript)
Jan 20 Javascript
JavaScript操纵窗口的方法小结
Jun 28 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
超漂亮的jQuery图片轮播特效
Nov 24 Javascript
JavaScript数据结构之二叉树的删除算法示例
Apr 13 Javascript
基于input动态模糊查询的实现方法
Dec 12 Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 Javascript
vue中的mescroll搜索运用及各种填坑处理
Oct 30 Javascript
Vue实现todo应用的示例
Feb 20 Vue.js
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图像裁剪缩略裁切类源码及使用方法
2016/01/07 PHP
php实现常见图片格式的水印和缩略图制作(面向对象)
2016/06/15 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
JavaScript版代码高亮
2006/06/26 Javascript
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
js时间戳格式化成日期格式的多种方法
2013/11/11 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
2013/12/14 Javascript
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
简介JavaScript中Boolean.toSource()方法的使用
2015/06/05 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
2016/06/24 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
domReady的实现案例
2016/11/23 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
Python爬取读者并制作成PDF
2015/03/10 Python
python修改操作系统时间的方法
2015/05/18 Python
Python监控主机是否存活并以邮件报警
2015/09/22 Python
对django中render()与render_to_response()的区别详解
2018/10/16 Python
Python语言快速上手学习方法
2018/12/14 Python
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
利用Python实现kNN算法的代码
2019/08/16 Python
python中执行smtplib失败的处理方法
2020/07/01 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
垃圾回收的优点和原理
2014/05/16 面试题
校园新闻广播稿
2014/01/10 职场文书
行政助理岗位职责
2015/02/10 职场文书
纪录片信仰观后感
2015/06/08 职场文书
2019银行竞聘书
2019/06/21 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书
Golang 对es的操作实例
2022/04/20 Golang