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 相关文章推荐
cnblogs csdn 代码运行框实现代码
Nov 02 Javascript
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
javascript Array对象基础知识小结
Nov 16 Javascript
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
gridpanel动态加载数据的实例代码
Jul 18 Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 Javascript
利用JS实现scroll自定义滚动效果详解
Oct 17 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
解决vue打包后刷新页面报错:Unexpected token
Aug 27 Javascript
Vue数字输入框组件的使用方法
Oct 19 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 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 无法加载mcrypt.dll的解决办法
2013/04/03 PHP
php中用socket模拟http中post或者get提交数据的示例代码
2013/08/08 PHP
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
NodeJS实现阿里大鱼短信通知发送
2016/01/17 NodeJs
JavaScript实现星级评分
2017/01/12 Javascript
基于JS实现移动端左滑删除功能
2017/07/28 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
JavaScript实现随机点名器实例详解
2019/05/07 Javascript
python创建线程示例
2014/05/06 Python
Python中的Matplotlib模块入门教程
2015/04/15 Python
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
python编程实现希尔排序
2017/04/13 Python
用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例
2017/12/14 Python
详解python持久化文件读写
2019/04/06 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
浅谈keras2 predict和fit_generator的坑
2020/06/17 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
python 发送邮件的示例代码(Python2/3都可以直接使用)
2020/12/03 Python
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
大三自我鉴定范文
2013/10/05 职场文书
酒店工作职员求职简历的自我评价
2013/10/23 职场文书
应聘编辑职位自荐信范文
2014/01/05 职场文书
安全生产目标责任书
2014/04/14 职场文书
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
初中教师个人工作总结
2015/02/10 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
爱的教育读书笔记
2015/06/26 职场文书
pytorch实现ResNet结构的实例代码
2021/05/17 Python
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android