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 相关文章推荐
跨浏览器的设置innerHTML方法
Sep 18 Javascript
动态为事件添加js代码示例
Feb 15 Javascript
html 锁定页面(js遮罩层弹出div效果)
Oct 27 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
Mar 01 Javascript
同时使用n个window onload加载实例介绍
Apr 25 Javascript
JS按字节截取字符长度实例
Nov 20 Javascript
javascript字符串循环匹配实例分析
Jul 17 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 Javascript
关于引入vue.js 文件的知识点总结
Jan 28 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学习教程之第1天
2008/06/15 PHP
PHP入门学习的几个不错的实例代码
2008/07/13 PHP
PHP分页函数代码(简单实用型)
2010/12/02 PHP
javascript实现轮显新闻标题链接
2007/08/13 Javascript
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
Javascript实现前端简单的路由实例
2016/09/11 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
Python的math模块中的常用数学函数整理
2016/02/04 Python
浅谈python中set使用
2016/06/30 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
图解Python变量与赋值
2018/04/03 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
浅谈Pytorch torch.optim优化器个性化的使用
2020/02/20 Python
python使用梯度下降算法实现一个多线性回归
2020/03/24 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
Pycharm Git 设置方法
2020/09/15 Python
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
C有"按引用传递"吗
2016/09/06 面试题
硕士研究生自我鉴定
2013/11/08 职场文书
理工类毕业自我鉴定
2014/02/20 职场文书
学生个人自我鉴定范文
2014/03/28 职场文书
教师年度个人总结
2015/02/11 职场文书
56句经典英文座右铭
2019/08/09 职场文书
CSS实现章节添加自增序号的方法
2021/06/23 HTML / CSS
JavaScript 原型与原型链详情
2021/11/02 Javascript