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 相关文章推荐
用cssText批量修改样式
Aug 29 Javascript
js实现幻灯片播放图片示例代码
Nov 07 Javascript
javascript 获取网页标题代码实例
Jan 22 Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 Javascript
JQuery的ON()方法支持的所有事件罗列
Feb 28 Javascript
浅析javascript中的DOM
Mar 01 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
vue中父子组件注意事项,传值及slot应用技巧
May 09 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
JS中循环遍历数组的四种方式总结
Jan 23 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
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
一步一步学习PHP(8) php 数组
2010/03/05 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
javascript 闭包详解
2015/02/15 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
javascript中this的四种用法
2015/05/11 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
js实现随机点名功能
2020/12/23 Javascript
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
Python3基础之条件与循环控制实例解析
2014/08/13 Python
Python内置函数dir详解
2015/04/14 Python
Python批量转换文件编码格式
2015/05/17 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
pycharm通过ssh连接远程服务器教程
2020/02/12 Python
pandas分组聚合详解
2020/04/10 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
雏鹰争章活动总结
2014/05/09 职场文书
运动会横幅标语
2014/06/17 职场文书
免职证明样本
2014/10/23 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
使用python向MongoDB插入时间字段的操作
2021/05/18 Python
Python torch.flatten()函数案例详解
2021/08/30 Python