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 $.ajax入门应用二
Nov 19 Javascript
基于jquery的复制网页内容到WORD的实现代码
Feb 16 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
AngularJS中的API(接口)简单实现
Jul 28 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
js实现移动端轮播图滑动切换
Dec 21 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 无限级缓存的类的扩展
2009/03/16 PHP
php_xmlhttp 乱码问题解决方法
2009/08/07 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
vue.js select下拉框绑定和取值方法
2018/03/03 Javascript
vue 实现数字滚动增加效果的实例代码
2018/07/06 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
使用Node.js实现一个多人游戏服务器引擎
2019/03/13 Javascript
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
理解python正则表达式
2016/01/15 Python
Python实现新浪博客备份的方法
2016/04/27 Python
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
python 中字典嵌套列表的方法
2018/07/03 Python
Python饼状图的绘制实例
2019/01/15 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
简述数组与指针的区别
2014/01/02 面试题
什么是Linux虚拟文件系统VFS
2012/01/31 面试题
农民致富事迹材料
2014/01/23 职场文书
素食餐饮项目创业计划书
2014/02/02 职场文书
服务之星事迹材料
2014/05/03 职场文书
新课培训心得体会
2014/09/03 职场文书
python flappy bird小游戏分步实现流程
2022/02/15 Python
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏