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 快速排序函数代码
May 30 Javascript
将HTML格式的String转化为HTMLElement的实现方法
Aug 07 Javascript
node.js中的dns.getServers方法使用说明
Dec 08 Javascript
javascript将异步校验表单改写为同步表单
Jan 27 Javascript
JavaScript中匿名函数用法实例
Mar 23 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
jquery获取input type=text中的值的各种方式(总结)
Dec 02 Javascript
js canvas实现QQ拨打电话特效
May 10 Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 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伪造referer实例代码
2008/09/20 PHP
PHP new static 和 new self详解
2017/02/19 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
Javascript之旅 对象的原型链之由来
2010/08/25 Javascript
动态的创建一个元素createElement及删除一个元素
2014/01/24 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
深入理解jQuery之防止冒泡事件
2016/05/24 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
基于Vue.js实现tab滑块效果
2017/07/23 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
JS改变页面颜色源码分享
2018/02/24 Javascript
js+css实现打字效果
2020/06/24 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
2019/01/18 jQuery
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
vue+element tabs选项卡分页效果
2020/06/29 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
python中import reload __import__的区别详解
2017/10/16 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
python队列Queue的详解
2019/05/10 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
Python循环结构的应用场景详解
2019/07/11 Python
Python实现直方图均衡基本原理解析
2019/08/08 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
关于Python解包知识点总结
2020/05/05 Python
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
JAVA程序员自荐书
2014/01/30 职场文书
诚信考试倡议书
2014/04/15 职场文书
高中生自我评价范文2015
2015/03/03 职场文书