大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现。
调用pager方法,输入参数,会返回一个导航条的html字符串。方法的内部比较简单。
复制代码 代码如下:
/**
* pageSize, 每页显示数
* pageIndex, 当前页数
* pageCount 总页数
* url 连接地址
* pager(10, 1, 5, 'Index')使用方法示例
*/
function pager(pageSize, pageIndex, pageCount, url) {
var intPage = 7; //数字显示
var intBeginPage = 0;//开始的页数
var intEndPage = 0;//结束的页数
var intCrossPage = parseInt(intPage / 2); //显示的数字
var strPage = "<div><span>第 <font color='#FF0000'>" + pageIndex + "https://www.jb51.net/" + pageCount + "</font> 页 每页 <font color='#FF0000'>" + pageSize + "</font> 条</span>";
if (pageIndex > 1) {
strPage = strPage + "<a href='" + url + "?pageIndex=1&pageSize=" + pageSize + "'><span>首页</span></a> ";
strPage = strPage + "<a href='" + url + "?pageIndex=" + (pageIndex - 1) + "&pageSize=" + pageSize + "'><span>上一页</span></a> ";
}
if (pageCount > intPage) {//总页数大于在页面显示的页数
if (pageIndex > pageCount - intCrossPage) {//当前页数>总页数-3
intBeginPage = pageCount - intPage + 1;
intEndPage = pageCount;
}
else {
if (pageIndex <= intPage - intCrossPage) {
intBeginPage = 1;
intEndPage = intPage;
}
else {
intBeginPage = pageIndex - intCrossPage;
intEndPage = pageIndex + intCrossPage;
}
}
} else {
intBeginPage = 1;
intEndPage = pageCount;
}
if (pageCount > 0) {
for (var i = intBeginPage; i <= intEndPage; i++) {
{
if (i == pageIndex) {//当前页
strPage = strPage + " <a href='javascript:void(0);'>" + i + "</a> ";
}
else {
strPage = strPage + " <a href='" + url + "?pageIndex=" + i + "&pageSize=" + pageSize + "' title='第" + i + "页'>" + i + "</a> ";
}
}
}
}
if (pageIndex < pageCount) {
strPage = strPage + "<a href='" + url + "?pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize + "'><span>下一页</span></a> ";
strPage = strPage + "<a href='" + url + "?pageIndex=" + pageCount + "&pageSize=" + pageSize + "'><span>尾页</span></a> ";
}
return strPage+"</div>";
}
试用这个方法试试