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

时间紧木有做成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' });
}

时间: 2024-11-03 22:57:10

Ajax搜索结果页面下方的分页按钮的生成_jquery的相关文章

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

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

表格下方的分页 用ajax怎么搞啊 能说一下大致思路吗

问题描述 表格下方的分页 用ajax怎么搞啊 能说一下大致思路吗 新人被安排到了 前台UI组 分页好像是用ajax 谁能具体说下啊 前台的东西不太懂 解决方案 直接用extjs或者easy ui,这图片看上去是用成套的东西做的. 解决方案二: 分页的数据在后台返回,ajax请求返回数据后,遍历数据:每次新建一个tr并组装添加到你的table上. 解决方案三: 1.后台分页: 当前端想后台发起数据请求时,返回当前页数据和具体的分页信息(包括页数,每页行数和数据总数),之后每次请求时,在请求参数中包

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

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

实例代码讲解ajax实现的无刷新分页_AJAX相关

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

仿sina微博的listview更多分页按钮

因为百事查需要,需要制作这样的更多分页按钮,因为感觉新浪微博的更多分页按钮比较好,就尝试做了一下. 1.首先需要考虑布局,就是footer的布局,如下:  代码如下 复制代码 <?xml version="1.0" encoding="UTF-8"?> <LinearLayout android:layout_width="fill_parent" android:orientation="vertical"

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

最新版本代码请移步到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 = {

ajax分页-ajax+jsp,做一个分页。

问题描述 ajax+jsp,做一个分页. 我现在写好了数据库,使用的是springmvc,hibernate,spring,三个框架,mysql数据库,前台显示数据,会取全部,不会ajax分页,求帮忙,. 解决方案 http://www.jb51.net/article/80018.htm 解决方案二: 我博客里有一个基于MVC模式的分页 希望能帮助你 仅供参考. 解决方案三: 在这里

smarty+ajax怎么制作无刷新分页

问题描述 smarty+ajax怎么制作无刷新分页 smarty+ajax怎么制作无刷新分页,求大神指导啊,真够纠结的

ajax+hibeinate+spring+spring mvc 分页

问题描述 ajax+hibeinate+spring+spring mvc 分页 我想知道怎么用ajax分页,每页10条,ajax写好之后,后台写什么方法去执行调用,我是新手,不懂这些,求大神帮帮忙我用的是spring,springmvc+hibernate,三个框架,实在是不会了. $(function() { //此demo通过Ajax加载分页元素 var initPagination = function() { var num_entries = $(""#hiddenresu