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 1.4.2发布!主要是性能与API
Feb 25 Javascript
十个优秀的Ajax/Javascript实例网站收集
Mar 31 Javascript
js获取元素在浏览器中的绝对位置
Jul 24 Javascript
JavaScript传递变量: 值传递?引用传递?
Feb 22 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
如何使用jquery实现文字上下滚动效果
Oct 12 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
Feb 16 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 Javascript
javascript的this关键字详解
May 20 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 Javascript
js中复选框的取值及赋值示例详解
Oct 18 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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
重置版游戏视频
2020/04/09 魔兽争霸
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
详解WordPress开发中过滤属性以及Sql语句的函数使用
2015/12/25 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
Laravel框架实现的上传图片到七牛功能详解
2019/09/06 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
JavaScript 弹出窗体点击按钮返回选择数据的实现
2010/04/01 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
详解javascript中原始数据类型Null和Undefined
2015/12/17 Javascript
简单理解vue中track-by属性
2016/10/26 Javascript
javaScript语法总结
2016/11/25 Javascript
浅析Angular19 自定义表单控件
2018/01/31 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
详解vue-cli 脚手架 安装
2019/04/16 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
优秀管理者获奖感言
2014/02/17 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
护校行动方案
2014/05/31 职场文书
班级标语大全
2014/06/21 职场文书
驾驶员安全责任书范本
2014/07/24 职场文书
2014年加油站工作总结
2014/12/04 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
mysql数据库实现设置字段长度
2022/06/10 MySQL