Ajax搜索结果页面下方的分页按钮的生成
前几天在做项目的时候 遇到个小问题，就是分页结果的页数太多一般5页到10页就结束了可是这个分页结果有400多页的当时就有些抓狂了，后来想了想模仿搜索引擎的结果页面对分页按钮显示做了优化代码如下：
时间紧木有做成JQ插件，通用性可能差一些但是基本功能是有的，比较适合初学者，望老鸟大虾表拍砖才好
哦少说了一句我用的是 JQueryUI里面的button感觉还不错
下图是第一页的样子
这是最后一页的样子
废话不说了上代码上面有参数说明看不懂的欢迎留言
1 //------------------------------------------------------ 2 // pageingBtn() 分页按钮的显示方法 3 // pageIndex: 当前第几页 4 // maxPage: 翻页数据集共有多少页 5 // btnSize: 最多显示按钮数 6 // pageSize: 分页数 7 // keyWord: 关键词 8 // container： 被填充的容器 9 //------------------------------------------------------10 function pageingBtn(pageIndex, maxPage, btnSize, pageSize, keyWord, container) {11 var BtnList = '';12 $(container).html('');13 if (pageIndex != 1) {14 BtnList += '<button value="1" class="firstPage"> 第一页 </button>';15 var prevPageIndex = ((pageIndex - 1) < 1 ? 1 : (pageIndex - 1));16 BtnList += '<button value="' + prevPageIndex + '" class="prevPage" > 上一页 第' + prevPageIndex + '页</button>';17 }18 //此处设置当前页显示的样式19 var pageIndexStyle = ' class="pageIndex"';
//设定按钮的起始值20 var start = (pageIndex - (btnSize / 2 | 0) > 0) ? (pageIndex - (btnSize / 2 | 0)) : 1;21 //如果按钮起始值+最多显示按钮数的和大于最大页数就将按钮起始值设置为最大页数减去起始值加一22 if ((start + btnSize) > maxPage) {23 start = maxPage - btnSize + 124 }
//这里处理的情况是如果你的最大显示按钮数为15那么当数据分页最大值为小于15的时候按钮将会出现-7，-6，-5，-4...0,1,2,3,4等很扯的情况25 start = (start <= 0 ? 1 : start);26 for (var i = start; i < start + btnSize; i++) {27 if (i > maxPage) {28 break;29 }30 if (i == pageIndex) {31 BtnList += '<button value="' + i + '"' + pageIndexStyle + '> ' + i + ' </button>';32 33 }34 else {35 BtnList += '<button value="' + i + '" > ' + i + ' </button>';36 }37 }38 if (pageIndex < maxPage) {39 var nextPageIndex = ((pageIndex + 1) > maxPage ? maxPage : (pageIndex + 1));40 BtnList += '<button value="' + nextPageIndex + '" class="nextPage" > 下一页 第' + nextPageIndex + '页 </button>';41 BtnList += '<button value="' + maxPage + '" class="endPage"> 最后一页 第' + maxPage + '页 </button>';42 }43 44 45 $(container).append(BtnList);46 //绑定后生成的按钮事件47 $(container).find("button").button().click(function () {48 loadingimg();49 $.post("/author/query/",50 {51 'pageIndex': $(this).val(),52 'pageSize': pageSize,53 'order': 'DESC',54 'sort': '',55 'KeyWords': keyWord //$("#SearchText").val()56 },57 function (data) {58 $("#SearchText").val(keyWord);59 LoadBookList(data);60 }61 );62 63 }64 );
//在此处修改按钮样式65 $(".nextPage").button({ icons: {66 secondary: "ui-icon-seek-next"67 }, text: false68 });69 $(".prevPage").button({ icons: {70 primary: "ui-icon-seek-prev"71 }, text: false72 });73 $(".endPage").button({ icons: {74 secondary: "ui-icon-seek-end"75 }, text: false76 });77 $(".firstPage").button({ icons: {78 primary: "ui-icon-seek-start"79 }, text: false80 });81 $(".pageIndex ").css({ 'background': '#ff0000', 'color': '#ffffff' });82 }83 84 转载于:https://www.cnblogs.com/WoodBean/archive/2012/04/04/WoodBean.html
Ajax搜索结果页面下方的分页按钮的生成相关推荐
- HTML、CSS、JS实现轮播图效果:包含分页按钮及切换箭头
HTML页面: 页面布局 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
- layui分页按钮失效解决办法
layui分页按钮失效解决办法 问题:分页条数没问题,但是无论点击分页按钮第一页还是第二页或者第N页,都是一次性把所有结果集返回,没有实现我们的效果 想要的结果是点击下方的分页按钮,表格能显示成上面的 ...
- ajax获取数据自动创建分页，支持自定义显示数据量以及分页数量
工作中遇到这一需求,时间仓促赶着演示,只用了1个多小时随随便便做的,满足自定义以及同页面多块分页同时进行,多的不说,直接上demo,工作忙,没时间细化,希望哪位路过优化细化后共享下,最后附上使用说明 ...
- 用AJAX实现无刷新的分页
最近学习了AJAX技术.AJAX,指的是异步的Javascript和xml.它的基本原理就是页面用Javascript发送一个异步的http请求到服务器,服务器返回数据后,再用Javascript静态 ...
- Ajax+Asp.Net无刷新分页
1.新建解决方案,并建立四个项目BLL,DAL,Model,PagerTest,如图所示: 2.Model代码 using System; using System.Collections.Gener ...
- 织梦 ajax 返回,Dede织梦arclist标签+Ajax实现织梦首页分页-叙述织梦
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 有时在做织梦模板的时候需要实现首页分页效果,但是织梦本身首页是不带分页功能的,那如何实现织梦首页分页呢? 用arclist标签+Ajax实现织梦首页分页 ...
- ajax往CJJTable传值,jQuery+ajax怎么样实现动态数据分页
这次给大家带来jQuery+ajax怎么样实现动态数据分页,用jQuery+ajax实现动态数据分页的注意事项有哪些,下面就是实战案例,一起来看一下. 用jQuery实现页码跳转式动态数据分页这个效果 ...
- 案例-分页按钮（CSS3）
案例-分页按钮(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charset=&qu ...
- 利用Ajax实现DataGrid无刷新分页(AjaxGrid)【转】
利用Ajax实现DataGrid无刷新分页(AjaxGrid) DataGrid功能强大,我们只用写几行代码就能够实现复杂的页面数据显示.数据多的时候免不了要分页显示,DataGrdi本身自带分页功能 ...
最新文章
- easy ui example
- 三国志战略版鸿蒙梦魇,三国志战略版：双控在手天下我有，洞察震慑枪已成吴国梦魇！...
- 型热电偶阻值温度对照表_如何选用温度传感器
- 剑指offer之【数组中的逆序对】
- wifi名称可以有空格吗_收购公司后可以变更公司名称吗，变更公司名称和股权如何处理？...
- golang unrecognized import path golang.org/x/net 完美解决方案
- 漫步数理统计十二——随机变量的期望
- Windows创建自动化任务
- mysql redis geo_利用Redis的Geo功能实现查找附近的位置
- Mono项目的新进展
- C语言客户端窗口创建,【自己动手】用C语言写一个基于服务器和客户端！
- nodejs pm2教程(转载)
- SQLServer2005删除log文件和清空日志的方案
- matlab app designer:夫琅禾费圆孔衍射仿真
- cloud2声卡_【箴言】带你解惑HyperX Cloud2（飓风）和Alpha（阿尔法）的终极选择
- 金融货币学笔记（米什金）第二章 金融体系概览
- MT管理器破解COC辅助
- python 群发邮件数量限制_用邮件群发平台群发邮件的数量有限制吗？一般可以发多少？...
- 日志技术之JUL入门
- java数组初始化赋值_Java数组的三种初始化方式