1、简单直接贴代码 需要引用以下样式和脚本
<link href="~/Scripts/Page/pager.css" rel="stylesheet" /> <script src="~/Scripts/jQuery-1.8.3.js"></script> <script src="~/Scripts/Page/jquery.pager.js"></script>
page.css代码如下
#pager ul.pages {
display:block;
border:none;
text-transform:uppercase;
font-size:10px;
margin:10px 0 50px;
padding:0;
}
#pager ul.pages li {
list-style:none;
float:left;
border:1px solid #ccc;
text-decoration:none;
margin:0 5px 0 0;
padding:5px;
}
#pager ul.pages li:hover {
border:1px solid #003f7e;
}
#pager ul.pages li.pgEmpty {
border:1px solid #eee;
color:#eee;
}
#pager ul.pages li.pgCurrent {
border:1px solid #003f7e;
color:#000;
font-weight:700;
background-color:#eee;
}
2、HTML代码
<div id="pager" class="page">
</div>
3、分页插件使用
pagenumber页码,
pagecount分页数量,
buttonClickCallback点击分页的函数,
TotalCount记录总数
PageEnter:true 跳页false不跳页
<script type="text/javascript"> $("#pager").pager({ pagenumber: pageclickednumber, pagecount: Math.ceil(total / 8), buttonClickCallback: PageClick, TotalCount: total, PageEnter: true }); PageClick = function (pageclickednumber) { } </script>
效果如下:
QQ:;.net技术讨论群: