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 != ) {
BtnList += <button value="" class="firstPage"> 第一页 </button>;
var prevPageIndex = ((pageIndex ) < ? : (pageIndex ));
BtnList += <button value=" + prevPageIndex + " class="prevPage" > 上一页 第 + prevPageIndex + 页</button>;
}
//此处设置当前页显示的样式
var pageIndexStyle = class="pageIndex"; //设定按钮的起始值
var start = (pageIndex (btnSize / | ) > ) ? (pageIndex (btnSize / | )) : ;
//如果按钮起始值+最多显示按钮数的和大于最大页数就将按钮起始值设置为最大页数减去起始值加一
if ((start + btnSize) > maxPage) {
start = maxPage btnSize +
} //这里处理的情况是如果你的最大显示按钮数为那么当数据分页最大值为小于的时候按钮将会出现等很扯的情况
start = (start <= ? : 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 + ) > maxPage ? maxPage : (pageIndex + ));
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: "uiiconseeknext"
} text: false
});
$("prevPage")button({ icons: {
primary: "uiiconseekprev"
} text: false
});
$("endPage")button({ icons: {
secondary: "uiiconseekend"
} text: false
});
$("firstPage")button({ icons: {
primary: "uiiconseekstart"
} text: false
});
$("pageIndex ")css({ background: #ff color: #ffffff });
}