jQuery前端分页示例分享_jquery
程序员文章站
2022-05-10 12:28:29
...
大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现。
/**
* 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 = "
}
[/code]
调用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 = "
第 " + pageIndex + "/" + pageCount + " 页 每页 " + pageSize + " 条";
if (pageIndex > 1) {
strPage = strPage + "首页 ";
strPage = strPage + "上一页 ";
}
if (pageCount > intPage) {//总页数大于在页面显示的页数
if (pageIndex > pageCount - intCrossPage) {//当前页数>总页数-3
intBeginPage = pageCount - intPage + 1;
intEndPage = pageCount;
}
else {
if (pageIndex intBeginPage = 1;
intEndPage = intPage;
}
else {
intBeginPage = pageIndex - intCrossPage;
intEndPage = pageIndex + intCrossPage;
}
}
} else {
intBeginPage = 1;
intEndPage = pageCount;
}
if (pageCount > 0) {
for (var i = intBeginPage; i {
if (i == pageIndex) {//当前页
strPage = strPage + " " + i + " ";
}
else {
strPage = strPage + " " + i + " ";
}
}
}
}
if (pageIndex strPage = strPage + "下一页 ";
strPage = strPage + "尾页 ";
}
return strPage+"
";if (pageIndex > 1) {
strPage = strPage + "首页 ";
strPage = strPage + "上一页 ";
}
if (pageCount > intPage) {//总页数大于在页面显示的页数
if (pageIndex > pageCount - intCrossPage) {//当前页数>总页数-3
intBeginPage = pageCount - intPage + 1;
intEndPage = pageCount;
}
else {
if (pageIndex intBeginPage = 1;
intEndPage = intPage;
}
else {
intBeginPage = pageIndex - intCrossPage;
intEndPage = pageIndex + intCrossPage;
}
}
} else {
intBeginPage = 1;
intEndPage = pageCount;
}
if (pageCount > 0) {
for (var i = intBeginPage; i {
if (i == pageIndex) {//当前页
strPage = strPage + " " + i + " ";
}
else {
strPage = strPage + " " + i + " ";
}
}
}
}
if (pageIndex strPage = strPage + "下一页 ";
strPage = strPage + "尾页 ";
}
return strPage+"
}
试用这个方法试试
复制代码
http://www.w3.org/1999/xhtml">
CustomerID | CompanyName | ContactName | ContactTitle | Address | City | Region | PostalCode | Country | Phone | Fax |
---|
[/code]
看下效果
列有点多,我只截图了部分,界面好丑,加点样式,用bootstrap来美化下
使用Nuget安装bootstrap
加上样式后
虽说不是特别漂亮,但还是对得起观众吧。
代码下载https://github.com/dengjianjun/JsPager
如果觉得对你有帮助,请点个赞,谢谢!