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 相关文章推荐
IE JS无提示关闭窗口不提示的方法
Apr 29 Javascript
MooBox 基于Mootools的对话框插件
Jan 20 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 Javascript
在JavaScript中处理数组之reverse()方法的使用
Jun 09 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
angular中的cookie读写方法
Aug 02 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
Mar 05 Javascript
vue中axios请求的封装实例代码
Mar 23 Javascript
jQuery实现可以扩展的日历
Dec 01 jQuery
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 表单数据的获取代码
2009/03/10 PHP
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
thinkphp分页实现效果
2016/10/13 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
jQuery 操作XML入门
2008/12/25 Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
使用Python编写Linux系统守护进程实例
2015/02/03 Python
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
python学生管理系统代码实现
2020/04/05 Python
python:接口间数据传递与调用方法
2018/12/17 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
在校学生职业规划范文
2014/01/08 职场文书
长安大学毕业生自我鉴定
2014/01/17 职场文书
护士上岗前培训自我鉴定
2014/04/20 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
用JS创建一个录屏功能
2021/11/11 Javascript