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 实用小技巧
Apr 07 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
学习Angularjs分页指令
Jul 01 Javascript
Vue表单实例代码
Sep 05 Javascript
读Javascript高性能编程重点笔记
Dec 21 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
微信小程序支付前端源码
Aug 29 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
Jul 15 Javascript
vue中data里面的数据相互使用方式
Jun 05 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学习 字符串课件
2008/06/15 PHP
php和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
如何使用PHP计算上一个月的今天
2013/05/23 PHP
php模板引擎技术简单实现
2016/03/15 PHP
Yii视图CGridView列表用法实例分析
2016/07/12 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
Prototype Hash对象 学习
2009/07/19 Javascript
javascript 拖放效果实现代码
2010/01/22 Javascript
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
javascript的push使用指南
2014/12/05 Javascript
EasyUi datagrid 实现表格分页
2015/02/10 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
原生JS实现小小的音乐播放器
2017/10/16 Javascript
JS实现的合并多个数组去重算法示例
2018/04/11 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
python得到qq句柄,并显示在前台的方法
2018/10/14 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
拉斯维加斯城市观光通行证:Las Vegas Pass
2019/05/21 全球购物
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
eBay美国官网:eBay.com
2020/10/24 全球购物
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
督导岗位职责
2015/02/04 职场文书
2015年销售部工作总结范文
2015/04/27 职场文书
外出学习心得体会范文
2016/01/18 职场文书
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android