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实现漂亮的动态信息提示效果
Aug 02 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
html超链接打开窗口大小的方法
Mar 05 Javascript
js动态创建表格,删除行列的小例子
Jul 20 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
基于Vue2.0的分页组件
Mar 16 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
vue-cli webpack2项目打包优化分享
Feb 07 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
js实现双色球效果
Aug 02 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 Javascript
javascript的setTimeout()使用方法总结
Nov 20 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中使用Curl、socket、file_get_contents三种方法POST提交数据
2011/08/12 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
js实现的万能flv网页播放器代码
2016/04/30 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
javascript遍历json对象的key和任意js对象属性实例
2017/03/09 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
python字典get()方法用法分析
2015/04/17 Python
python多线程http压力测试脚本
2019/06/25 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
正宗的澳大利亚Ugg靴子零售商:UGG Express
2020/04/19 全球购物
应届大学生求职的自我评价
2013/11/17 职场文书
销售会计工作职责
2013/12/02 职场文书
个人简历自我评价范文
2014/02/04 职场文书
小学生春游活动方案
2014/08/20 职场文书
五年级学生期末评语
2014/12/26 职场文书
python flappy bird小游戏分步实现流程
2022/02/15 Python