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

时间紧木有做成JQ插件，通用性可能差一些但是基本功能是有的，比较适合初学者，望老鸟大虾表拍砖才好
哦少说了一句我用的是 JQueryUI里面的button感觉还不错
下图是第一页的样子

这是最后一页的样子

废话不说了上代码上面有参数说明看不懂的欢迎留言


代码如下:

//------------------------------------------------------
// 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' });
}

赞 (0)

相关推荐

  • Thinkphp搜索时首页分页和搜索页保持条件分页的方法

    本文实例讲述了Thinkphp实现搜索时首页分页和搜索页保持条件分页的方法.分享给大家供大家参考.具体实现方法如下: 在做搜索查询时突然发现在首页用的分页代码在搜索页使用时出现错误,首页分页代码(代码中标注start与end部分为分页代码) 复制代码 代码如下: public function index(){   $res=D('Info');// 实例化Data数据对象 /**********start************/   import('ORG.Util.Page');// 导入

  • ThinkPHP让分页保持搜索状态的方法

    对很多使用ThinkPHP框架的人来说,使用自动自带的增删改查基类,在分页的时候要保持结果页面的搜索状态,但是使用thinkphp手册中的方案却无法奏效. ThinkPHP手册中的解决方法是: //分页跳转的时候保证查询条件 foreach($map as $key=>$val) { $Page->parameter .= "$key=".urlencode($val).&; } 直接粘贴过来不能用,经过调试会发现,当$map不是一个数组的时候,那么变量是拿不到想要

  • ajax结合豆瓣搜索结果进行分页完整代码

    使用豆瓣api,得到分页结果.相当于从后台数据库获得的结果一样.所不同的是,没法事先知道页数.虽然通过请求api可以获得总页数,但由于ajax是异步的,所以对于分页一开始就要给出总页数来说,这是没有意义的.我使用了一个固定总页数65(正是搜索javascript书籍返回的总页数).所以其他书籍是并不是65页,会出现多页或者少页的情况,这并不是bug. 特点 1,全程不需要接触后台,前端独立就可以(我找过好长时间都没找过完整的例子). 2,使用了bootstrap的pagination制作页码和p

  • .net搜索查询并实现分页实例

    前台: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="分页.aspx.cs" Inherits="分页练习.分页" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

  • 使用Java的Lucene搜索工具对检索结果进行分组和分页

    使用Java的Lucene搜索工具对检索结果进行分组和分页

    使用GroupingSearch对搜索结果进行分组 Package org.apache.lucene.search.grouping Description 这个模块可以对Lucene的搜索结果进行分组,指定的单值域被聚集到一起.比如,根据"author"域进行分组,"author"域值相同的的文档分成一个组. 进行分组的时候需要输入一些必要的信息: 1.groupField:根据这个域进行分组.比如,如果你使用"author"域进行分组,那么

  • BootStrap Table 分页后重新搜索问题的解决办法

    前提: 自定义搜索且有分页功能,比如搜索产品名的功能. 现象:当搜索充气娃娃的时候返回100条记录,翻到第五页. 这时候搜索按摩棒,数据有200条,结果应该是第一页的记录,但是实际显示的还是第五页的结果. 也就是重新搜索后,pagenumber没有变. 按网上大部分说的:重新设置option就行了 $('#tableList').bootstrapTable({pageNumber:1,pageSize:10}); 以上是解决不了这个问题. 正确做法是 $("#table").boot

  • 实现PHP搜索加分页

    分页显示是浏览大量数据的一种方法.对于初学者来说常常对这个问题摸不着头绪,因此特地撰写此文对这个问题进行详细的讲解,力求让看完这篇文章的朋友在看完以后对于分页显示的原理和实现方法有所了解. 所有示例代码均使用php编写. 所谓分页显示,也就是将数据库中的结果集人为的分成一段一段的来显示. 请详细阅读以下代码,自己调试运行一次,最好把它修改一次,加上自己的功能. $wherelist=array(); $urlist=array(); if(!empty($_GET['title'])) { $w

  • jquery+json实现的搜索加分页效果

    1.Web 里面有三个目录: 1.1 content.htm //这个文件直接运行就行 1.2 js //这里面有用到的几个js 文件,其中 以db 开头的就是数据源(就是json 串) 1.3 css //css 就不用说了 2. 直接运行 content.htm 就可以直接打开查看分页和搜索效果了 3. 原理很简单,只是用了javascript 的index 函数核心代码: 复制代码 代码如下: /* author: liulf function: var __db_cpcj=vCpcj;

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

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

    时间紧木有做成JQ插件,通用性可能差一些但是基本功能是有的,比较适合初学者,望老鸟大虾表拍砖才好 哦少说了一句我用的是 JQueryUI里面的button感觉还不错 下图是第一页的样子 这是最后一页的样子 废话不说了上代码上面有参数说明看不懂的欢迎留言 复制代码 代码如下: //------------------------------------------------------ // pageingBtn() 分页按钮的显示方法 // pageIndex: 当前第几页 // maxPag

  • ThinkPHP5.1+Ajax实现的无刷新分页功能示例

    本文实例讲述了ThinkPHP5.1+Ajax实现的无刷新分页功能.分享给大家供大家参考,具体如下: 无刷新分页可以减轻服务器负担,利用Ajax技术,请求部分信息,提高网站访问速度,是网站建设的必备技术. 需要在后台展示自定义属性列表(lst.html),其中的列表部分摘出来,放到(paginate1.html)中: <div class="row"> <div class="col-sm-12"> <div class="i

  • 实例代码讲解ajax实现的无刷新分页

    1.Ajax 无刷新页面的好处:提供良好的客户体验,通过 Ajax 在后台从数据库中取得数据并展示,取缔了等待加载页面而出现的空白状态: 2.那么,Ajax 无刷新页面是运行在动态页面(.php)?还是静态页面(.html/.htm/.shtml)?答案是:静态页面: 3.实现原理:通过前端 JS 脚本程序与 Ajax 相结合取得从动态页面返回的数据,并显示. 现在什么都讲究一个无刷新,就连分页也是如此,下面是小编日常整理的关于一段无刷新代码,希望能够帮到大家. 代码如下: 一.html代码部分

  • Jquery+Ajax+Json+存储过程实现高效分页

    之前在做分页时,很多朋友都是用Jquery分页插件,之前我就用的jquery.paper,有需要的朋友可以联系我,接下来小编给大家分享用Jquery+Ajax+Json+存储过程实现高效分页. 实现此功能用分页存储过程,pagination,js样式,废话不多了,具体请看下面代码  分页存储过程:PAGINATION CREATE PROCEDURE [dbo].[PAGINATION] @FEILDS VARCHAR(),--要显示的字段 @PAGE_INDEX INT,--当前页码 @PAG

  • 基于JS分页控件实现简单美观仿淘宝分页按钮效果

    基于JS分页控件实现简单美观仿淘宝分页按钮效果

    最新版本代码请移步到https://github.com/pgkk/kkpager 在线测试链接:http://pgkk.github.io/kkpager/example/pager_test.html 分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 附件中有完整例子的压缩包下载.已更新到最新版本 先看效果图: 01输入框焦点效果 02效果 模仿淘宝的分页按钮效果控件kkpager JS代码: Js代码 var kkpager = {

  • PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】

    PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】

    本文实例讲述了PHP+Ajax实现的无刷新分页功能.分享给大家供大家参考,具体如下: 注:本文中使用到的一些类库在前面文章都能找到源代码,我会在文中指明链接所在,为了缩短文章篇幅,由此带来的阅读不便,敬请谅解. 本文讲解 Ajax 实现无刷新分页.实现原理.代码展示.代码下载. 这里需要说明一些知识: 1.Ajax 无刷新页面的好处:提供良好的客户体验,通过 Ajax 在后台从数据库中取得数据并展示,取缔了等待加载页面而出现的空白状态: 2.那么,Ajax 无刷新页面是运行在动态页面(.php)

  • layui 数据表格 点击分页按钮 监听事件的实例

    找了 很多 关于表格分页 点击事件 请求, table.render 并不支持监听点击事件,所以我就把 table.render 和 laypage.render结合在一起 (我也不想写分页的,但是后台讲数据多 ,要加分页,被逼无奈 ,想了一个方法) 先上图 代码 .html <div> <table class="layui-hide" id="test" lay-filter="demo"></table>

  • Ajax实现搜索功能的分页

    本文实例为大家分享了Ajax实现搜索功能的分页,供大家参考,具体内容如下 之前只实现了搜索功能,但是并不能分页2333,所以在上篇的基础上修改实现分页(首页,上一页,下一页,尾页,跳转页面),脑袋瓜不够用,要记下来记下来 html代码 <a class="btn-lit" type="submit" onclick="searchResult(on())"><span>搜索</span></a> /

  • ajax请求后台得到json数据后动态生成树形下拉框的方法

    如下所示: <select id="cc" class="easyui-combotree" style="width:580px;" name="rempId" data-options="required:true"></select> <script> $(function(){ $.ajax({ url:"departmentAction_getAllD

  • JS实现点击按钮随机生成可拖动的不同颜色块示例

    JS实现点击按钮随机生成可拖动的不同颜色块示例

    本文实例讲述了JS实现点击按钮随机生成可拖动的不同颜色块.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

随机推荐