分页样式如下:
分页效果
public class Qtpager
{
/// <summary>
/// 分页代码
/// </summary>
/// <param name="pagesize">每页显示条数</param>
/// <param name="currentpage">当前页码</param>
/// <param name="totalcount">数据总条数</param>
/// <returns></returns>
public static string ShowPage(int pagesize, int currentpage,int totalcount)
{
pagesize = pagesize <= 0 ? 15 : pagesize;//默认每页15条数据
var totalpage = Math.Max((totalcount + pagesize - 1)/pagesize, 1);//总页数
var output = new StringBuilder();
if (totalpage <= 10)//总页数小于10,按页码全部显示
{
if (currentpage > totalpage)
{
output.AppendFormat("<a href='?page={0}' class='current'>{0}</a>", 1);
}
else
{
output.AppendFormat("<a href='?page={0}'>{0}</a>", 1);
}
for (int i = 2; i <= totalpage; i++)
{
if (i == currentpage)
{
output.AppendFormat("<a href='?page={0}' class='current'>{0}</a>", i);
}
else
{
output.AppendFormat("<a href='?page={0}'>{0}</a>", i);
}
}
}
else//总页数大于10,显示当前页的前后三页、首页、最后一页
{
if(currentpage<=3)
{
for (int i = 1; i < currentpage; i++)
{
output.AppendFormat("<a href='?page={0}'>{0}</a>", i);
}
output.AppendFormat("<a href='?page={0}' class='current'>{0}</a>", currentpage);
}
else
{
output.Append("<a href='?page=1'>1</a>");
output.Append("...");
output.AppendFormat("<a href='?page={0}'>{0}</a>", currentpage - 3);
output.AppendFormat("<a href='?page={0}'>{0}</a>", currentpage - 2);
output.AppendFormat("<a href='?page={0}'>{0}</a>", currentpage - 1);
output.AppendFormat("<a href='?page={0}' class='current'>{0}</a>", currentpage);
}
if (totalpage - currentpage > 3)
{
output.AppendFormat("<a href='?page={0}'>{0}</a>", currentpage + 1);
output.AppendFormat("<a href='?page={0}'>{0}</a>", currentpage + 2);
output.AppendFormat("<a href='?page={0}'>{0}</a>", currentpage + 3);
output.Append("...");
output.AppendFormat("<a href='?page={0}'>{0}</a>", totalpage);
}
else
{
for (int i = currentpage + 1; i <= totalpage; i++)
{
output.AppendFormat("<a href='?page={0}'>{0}</a>", i);
}
}
}
return output.ToString();
}
}
前台代码:
<div class="pageNav">
<div class="pagelist">
<a href="?page=1">1</a>...<a href="?page=3">3</a><a href="?page=4">4</a><a href="?page=5">5</a><a href="?page=6" class="current">6</a><a href="?page=7">7</a><a href="?page=8">8</a><a href="?page=9">9</a>...<a href="?page=20">20</a>
</div>
</div>
样式表:
.pageNav{height:40px;margin:50px auto 20px auto; width:500px; clear:both; text-align:center}
.pagelist {text-align:center; font-size:14px}
.pagelist a{padding:3px 6px; margin:2px;text-decoration:none; color:#777}
.pagelist a:hover,.pagelist a.current{background-color:#ec6d1e;color: #fff !important;border-radius: 5px;}
.pagelist a:active{color:#000}
.pagelist span.disabled{padding:3px 6px}
网友评论