Ajax搜索结果页面下方的分页按钮的生成

2014-07-23  来源:本站原创  分类:jquery  人气:0 

前几天在做项目的时候 遇到个小问题,就是分页结果的页数太多一般5页到10页就结束了可是这个分页结果有400多页的当时就有些抓狂了,后来想了想模仿搜索引擎的结果页面

时间紧木有做成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' });
}
相关文章
  • Ajax搜索结果页面下方的分页按钮的生成 2014-07-23

    前几天在做项目的时候 遇到个小问题,就是分页结果的页数太多一般5页到10页就结束了可是这个分页结果有400多页的当时就有些抓狂了,后来想了想模仿搜索引擎的结果页面 时间紧木有做成JQ插件,通用性可能差一些但是基本功能是有的,比较适合初学者,望老鸟大虾表拍砖才好 哦少说了一句我用的是 JQueryUI里面的button感觉还不错 下图是第一页的样子 这是最后一页的样子 废话不说了上代码上面有参数说明看不懂的欢迎留言 //---------------------------------------

  • asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码 2014-04-24

    本篇文章主要是对asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码进行了介绍,需要的朋友可以过来参考下,需要对大家有所帮助 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxJson.aspx.cs" Inherits="AjaxJson" %> <!DOCTYPE html PUBLIC "-//W3C

  • 仿淘宝分页按钮效果简单美观易使用的JS分页控件 2014-03-25

    分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 附件中有完整例子的压缩包下载. 先看效果图: 01输入框焦点效果 02效果 模仿淘宝的分页按钮效果控件kkpager var kkpager = { //divID pagerid : 'div_pager', //当前页码 pno : 1, //总页码 total : 1, //总数据条数 totalRecords : 0, //是否显示总页数 isShowTotalPage : tru

  • 用Ajax来控制书签和回退按钮的代码 2014-04-16

    这篇文章描述了一个支持Ajax应用书签和回退按钮的开源的javascript库.在这个指南的最后,开发者将会得出一个甚至不是Google Maps 或者 Gmail那样处理的Ajax的解决方案:健壮的,可用的书签和向前向后的动作能够象其他的web页面一样正确的工作. Ajax:怎样去控制书签和回退按钮 这篇文章说明了一个重要的成果,Ajax应用目前面对着书签和回退按钮的应用,描述了非常简单的历史库(Really Simple History),一个开源的解决这类问题的框架,并提供了一些能够运行的

  • AJAX和三层架构实现分页功能具体思路及代码 2014-12-30

    本文涉及到AJAX和三层架构方面的知识,在学习分页的同时也巩固了一下它们的相关知识,适合初学者的你 -----------------------------HTMLPage1.htm--------------------------------- <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/cs

  • Ajax案例集下载:新增分页查询案例(包括中的两个综合案例) 下载 2015-02-04

    在<Ajax开发精要>中,我构建了两个简单的综合范例.一个是支持增.删.改.模糊搜索的简单留言簿,另外一个是模拟MSN Space所提供的日志评论.固定链接.引用通告以及自定义列表管理的功能. 今天新增一个分页查询的案例.同样的,与之前的两个案例类似,分页查询的持久化数据依然来自xml文档,以方便网友的拷贝和部署.构建这个案例的方法与之前两个案例大致相当,都是使用XMLHttpRequest.responseXML获取数据,然后填充到页面的相应位置.构建过程中注意代码复用. <Ajax开

  • 仿android系统主界面 下方的小按钮滑动效果 SlideDraw 2013-01-22

    哎 这个效果 我也不好解释 想了半天就这样描述了 便于大家搜索吗 其实 实现很简单 但是个人感觉很有用 主要就是 对SlideDraw 类的使用 看看效果先 在那个slidedraw中可以放置各种布局以及组件 本例 只放了个 textview 所有大家可以用它做自己的一些菜单设置之类的 具体看代码吧 转载:http://www.adobex.com/android/source/details/00000126.htm

  • AJAX在不同浏览器中XMLHttpRequest对象的生成示例 2014-10-27

    本文为大家介绍下AJAX在不同浏览器中XMLHttpRequest对象是怎样生成的,以方便我们针对不同浏览器进行测试,感兴趣的朋友可以参考下,希望对大家有所帮助 <script type="text/javascript"> function ajax() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Ex

  • asp.net 使用ObjectDataSource控件在ASP.NET中实现Ajax真分页 2014-03-23

    ASP.NET 3.5中新增加的ListView控件是一个用于页面数据绑定和界面布局的非常棒的控件,它在ASP.NET 2.0 GridView的基础上做了很多改进,用户在使用时可以控制的元素更多,开发时的灵活性更大了,个人觉得ListView在使用时比DataGrid和GirdView更加顺手. ListView控件本身并没有分页功能,不过借助于ASP.NET中新增加的DataPager控件,我们可以非常方便地对ListView中的数据设置分页,这几乎不需要开发人员写一行代码,将ListVie

  • 用AJAX实现的无刷新的分页实现代码(asp.net) 2014-08-29

    最近学习了AJAX技术.AJAX,指的是异步的Javascript和xml.它的基本原理就是页面用Javascript发送一个异步的http请求到服务器,服务器返回数据后,再用Javascript静态的去更改页面某个地方的值,而无需提交表单. 之前,服务器返回的数据都是用xml的形式传给客户端的,但是xml传一个类的对象的数据会很长,流量大,所以现在都是改用json来传数据,复杂数据用json,简单数据用string.所有AJAX中的x已经失去了它原来的意义. 大家都知道JQuery,是一个Ja

  • javascript ajax 仿百度分页函数 2014-11-24

    百度分页想必大家都知道吧,浏览网页的朋友都应该知道,下面有个小例子使用到了js.ajax等来模仿百度的分页,感兴趣的朋友可以参考下 /** * Ajax分页功能 * 在需要分页的地方添加<ul class="pagination"></ol> * 作为分页组件容器元素. * pageCount 总页数 * currentPage 当前页数 * container 带有pagination类的ol容器元素 * loadData 用于加载数据的函数 * versio

  • jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版 2015-02-19

    此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢,接下来详细介绍使用方法,感兴趣的朋友可以了解下 原项目地址:http://plugins.jquery.com/project/pagination 版本:v1.2 源文件下载:英文原版 或中文翻译修改版 一.相关demo 基本demo页面 Ajax demo页面 参数可编辑demo页面 二.简介与说明 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与

  • AspNetAjaxPager,Asp.Net通用无刷新Ajax分页控件,支持多样式多数据绑定 2014-06-30

    最近闲来没事,总结了一些asp.net分页经验,为使用方便现在写了一个可以通用的分页控件:AspNetAjaxPager:,使用ajax技术实现无刷新分页,能够控制所有数据绑定控件的分页,自己觉得效果还是挺不错的,现在奉献给大家! 本控件可以对GridView,Repeater,DataGrid,DataList...几乎所有的.net数据绑定控件进行分页,全部无刷新,数据绑定部分可以使用存储过程也可以直接使用sql语句,这对本控件没有任何干扰!本控件具有较好的用户界面,能够根据需要变换各种样式

  • Ajax无刷新分页的性能优化方法 2014-09-02

    这篇文章主要介绍了Ajax无刷新分页的性能优化方法的相关资料,需要的朋友可以参考下 Ajax无刷新分页,已经是一个大家比较熟悉的事物了,大概就是web前端页面上有一个js的方法,通过Ajax去请求服务器端的分页数据接口,拿到数据后再在页面上创建html结构,展现给用户,类似于下面这样: <script type="text/javascript"> function getPage(pageIndex){ ajax({ url:" RemoteInterface.

  • 精心挑选的12款优秀jQuery Ajax分页插件和教程 2014-10-01

    在这篇文章中,我为大家收集了12个基于jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 jQuery 框架很容易实现各种基于 Ajax 技术实现的功能.我们一起来看看下面这些优秀的分页插件. 1.Client-side jQuery pagination plugin : jPages jPages 是一款非常不错的客户端分页插件,有很多特色,例如自动播放.按键翻页.延迟加载等等. 浏览

  • 分享精心挑选的12款优秀jQuery Ajax分页插件和教程 2014-10-02

    在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示 Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 jQuery 框架很容易实现各种基于 Ajax 技术实现的功能.我们一起来看看下面这些优秀的分页插件. 1.Client-side jQuery pagination plugin : jPages jPages 是一款非常不错的客户端分页插件,有很多特色,例如自动播放.按键翻页.延迟加载等等. 浏

  • 精心挑选的12款优秀 jQuery Ajax 分页插件和教程 2014-08-20

    在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 jQuery 框架很容易实现各种基于 Ajax 技术实现的功能.我们一起来看看下面这些优秀的分页插件. 1.Client-side jQuery pagination plugin : jPages jPages 是一款非常不错的客户端分页插件,有很多特色,例如自动播放.按键翻页.延迟加载等等. 浏

  • jQuery插件pagination实现分页特效 2015-02-24

    jQuery分页插件示例,ajax方式的jQuery前端分页插件,其核心代码jquery.pagination.js已随示例打包,Demo中包括了5种不同的分页效果演示,全部是Ajax无刷新方式实现分页,对于搞前端开发的朋友来说,这是个值得收藏的代码特效,为以后实现无刷新分页提供方便. 实用jQuery分页特效插件jquery.pagination.js,基于jQuery实现,可根据pageselectCallback函数callback调用通过ajax调用动态数据,目前的方法是生成JSON数据

  • 最新web应用技术---Ajax框架 2015-01-16

    Ajax简介 术语Ajax用来描述一组技术,它使浏览器可以为用户提供更为自然的浏览体验.在Ajax之前,Web站点强制用户进入提交/等待/重新显示范例,用户的动作总是与服务器的"思考时间"同步.Ajax提供与服务器异步通信的能力,从而使用户从请求/响应的循环中解脱出来.借助于Ajax,可以在用户单击按钮时,使用JavaScript和DHTML立即更新UI,并向服务器发出异步请求,以执行更新或查询数据库.当请求返回时,就可以使用 JavaScript和CSS来相应地更新UI,而不是刷新整

  • WordPress Ajax无限下拉瀑布流插件Infinite Scroll 2014-09-20

    Ajax无限下拉瀑布流效果,只要滚动鼠标或浏览器界面往下拉,访客不必点击翻页按钮,网页无需刷新便会自动加载分页数据,对增加用户体验有不低的促进作用.Infinite Scroll插件完美支持这一需求,只需要在后台简单设置下网页元素选择器名称就可以实现无限加载更多文章,适用于首页和分类页面. 实现的思路,隐藏分页按钮,这样不会影响到搜索引擎收录,动态免刷新加载更多文章. 首先安装插件:https://wordpress.org/plugins/infinite-scroll/ 安装Infinite