欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-14 15:20:41
...
时间紧木有做成JQ插件,通用性可能差一些但是基本功能是有的,比较适合初学者,望老鸟大虾表拍砖才好
哦少说了一句我用的是 JQueryUI里面的button感觉还不错
下图是第一页的样子
Ajax搜索结果页面下方的分页按钮的生成_jquery
这是最后一页的样子
Ajax搜索结果页面下方的分页按钮的生成_jquery
废话不说了上代码上面有参数说明看不懂的欢迎留言
复制代码 代码如下:

//------------------------------------------------------
// pageingBtn() 分页按钮的显示方法
// pageIndex: 当前第几页
// maxPage: 翻页数据集共有多少页
// btnSize: 最多显示按钮数
// pageSize: 分页数
// keyWord: 关键词
// container: 被填充的容器
//------------------------------------------------------
function pageingBtn(pageIndex, maxPage, btnSize, pageSize, keyWord, container) {
var BtnList = '';
$(container).html('');
if (pageIndex != 1) {
BtnList += '';
var prevPageIndex = ((pageIndex - 1) BtnList += '';
}
//此处设置当前页显示的样式
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 for (var i = start; i if (i > maxPage) {
break;
}
if (i == pageIndex) {
BtnList += '';
}
else {
BtnList += '';
}
}
if (pageIndex var nextPageIndex = ((pageIndex + 1) > maxPage ? maxPage : (pageIndex + 1));
BtnList += '';
BtnList += '';
}
$(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 分页按钮