JS分页效果示例

分页

<script type="text/javascript" language="javascript" src="js/pager.js"></script>

/*--------pager-------*/ 
.number span a{padding:4px 6px;} 
.number span a:hover{padding:4px 6px; background-color: #999;color:#FFFFFF;} 
.number {margin:5px 0;font-size: 14px;font-weight: bold;color: #ff00ff;} 
.number span{border:solid 1px #cccccc;background-color:#FFFFFF;color:#666666;line-height:20px;display:inline-block;margin-left:4px;margin-right:4px;} 
#a_title{ text-align:center; height:30px; line-height:30px;font-size:18px; font-weight:bolder; display:block} 
#a_smalltitle{font-size:14px; font-weight:bolder; text-align:center;display:block;} 
.a_about{text-align:center; display:block; height:20px; line-height:20px; background:#F3F8F7} 
#a_content{padding:10px; height:auto;overflow:hidden;text-align:left;line-height: 200%; word-break:break-all;} 
#a_near{padding-left:20px; margin:5px 0; height:auto} .Red{ color:Red} 
<p class="nav"> 
<!--js分页--> 
<script type="text/javascript" language="javascript"> 
var pg = new showPages('pg'); 
pg.pageCount = <% =PageCount %>; 
pg.printHtml(); 
</script> 
</p> 
</div> 
public void Bind() 
{ 
Maticsoft.BLL.news bllnews = new Maticsoft.BLL.news(); 
PagedDataSource ps = new PagedDataSource(); 
ps.DataSource = bllnews.GetAllList().Tables[0].DefaultView; 
ps.AllowPaging = true; 
ps.PageSize = 5;//分页大小 
ps.CurrentPageIndex = currentPage - 1; 
pageCount = ps.PageCount.ToString(); 
r1.DataSource = ps; 
r1.DataBind(); 
}