Asp.Net服务器端有相关分页的控件或者第三方的分页插件可以实现分页。我经常使用的AspNetPager组件就是一个非常好用的分页插件。但在某些特殊情况下,我们需要实现客户端的定时刷新分页,比如股票模拟大赛,下单后,今日委托的数据信息,可以在进入大赛的首页的左侧显示,每页显示五条记录,每五页是一组(即1 2 3 4 5 ...或 ... 1 2 3 4 5 ...)。当前页码红色字体显示,不可点击,刷新后,还是显示在当前页(... 是上一个五页的最后一页,点击后,跳转到上一个五页。或者是下一个五页的第一页,点击后,跳转到下一个五页【不足五页,有几页就显示几页】)。这个效果就是实现AspNetPager分页那样的效果。之所以要客户端定时刷新分页,是因为下单后,今日委托的数据会增加,这样会导致列表数据增加,页码也会增加。列表数据的更新也是用客户端脚本来更新,这里只谈分页的定时刷新。
思路:需要保存当前的页码,刷新时,就可以取到这个的页码。这个页码可以用<input type="hidden" runat="server" />来保存。执行客户端脚本setInterval("refushEntrust()", 5000)定时刷新分页。其中 refushEntrust()是执行刷新分页的函数。贴出代码来讲解:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
< div id ="entrust_aspnetPager" style ="vertical-align:top;" >
< webdiyer:AspNetPager ID ="AspNetPager1" runat ="server"
onpagechanged ="AspNetPager1_PageChanged" FirstPageText ="" LastPageText =""
NextPageText ="" NumericButtonCount ="5" PageSize ="5" PrevPageText =""
ShowBoxThreshold ="100" >
</ webdiyer:AspNetPager >
</ div >
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
{
var pageIndex = document.getElementById( ' MainTodayEntrust1_hidLeftPageIndex ' ).value;
var pagerList = WebUserControls_TradeCenter_MainTodayEntrustControl.AjaxGetEntrustPagerList(pageIndex).value;
if (entrustList != null )
{
document.getElementById( ' entrust_aspnetPager ' ).innerHTML = pagerList;
}
}
没什么好解释的,其中WebUserControls_TradeCenter_MainTodayEntrustControl.AjaxGetEntrustPagerList(pageIndex)是从后台取数据。这个通过AjaxPro2.dll可以实现。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
public string AjaxGetEntrustPagerList(string pageIndex)
{
_PageIndex = Convert.ToInt32(pageIndex); // 当前页,首页为1
int count;
GetTodayEntrust(_PageIndex, out count);
int pageCount = count / 5 + (count % 5 == 0 ? 0 : 1 ); // 总页数
StringBuilder pagerListHtml = new StringBuilder();
pagerListHtml.Append( " <div id=\ " MainTodayEntrust1_AspNetPager1\ " style=\ " vertical - align:top\ " > " );
if (_PageIndex == 1 ) // 当前页是首页,且总页数不止一页
{
if (pageCount > _PageIndex)
{
pagerListHtml.Append( " <span style=\ " margin - right: 5px; font - weight: bold; color: red;\ " >1</span> " );
for ( int i = 2 ; i <= pageCount; i ++ )
{
if (i <= 5 )
{
pagerListHtml.Append( " <a style=\ " margin - right: 5px;\ " href=\ " javascript:__doPostBack( ' MainTodayEntrust1$AspNetPager1 ' , ' " + i + " ' )\ " > " + i + " </a> " ); // 总页数不超过五
}
else
{
pagerListHtml.Append( " <a style=\ " margin - right: 5px;\ " href=\ " javascript:__doPostBack( ' MainTodayEntrust1$AspNetPager1 ' , ' " + i + " ' )\ " >...</a> " ); // 总页数超过五
break ;
}
}
}
}
else
{
int j = (_PageIndex - 1 ) / 5 * 5;
if (j > 0 ) // 有前页
{
pagerListHtml.Append( " <a style=\ " margin - right: 5px;\ " href=\ " javascript:__doPostBack( ' MainTodayEntrust1$AspNetPager1 ' , ' " + j + " ' )\ " >...</a> " );
}
for ( int i = j + 1 ; i <= j + 5 ; i ++ )
{
if (i != _PageIndex)
{
if (i <= pageCount)
{
pagerListHtml.Append( " <a style=\ " margin - right: 5px;\ " href=\ " javascript:__doPostBack( ' MainTodayEntrust1$AspNetPager1 ' , ' " + i + " ' )\ " > " + i + " </a> " );
}
}
else
{
pagerListHtml.Append( " <span style=\ " margin - right: 5px; font - weight: bold; color: red;\ " > " + i + " </span> " );
}
}
if (pageCount > j + 5 ) // 有尾页
{
pagerListHtml.Append( " <a style=\ " margin - right: 5px;\ " href=\ " javascript:__doPostBack( ' MainTodayEntrust1$AspNetPager1 ' , ' " + (j + 6) + " ' )\ " >...</a> " );
}
}
pagerListHtml.Append( " </div> " );
return pagerListHtml.ToString();
}
PS:在测试时,当只有一页数据时(不显示数字1),下多个单,超过一页时,点击页码(比如2),出现脚本错误。这个错误出现在IE6中,IE8,Chrome,FireFox没有这个错误。解决的方法是:在Page_Load事件中对控件AspNetPager1注册回发事件:Page.GetPostBackEventReference(AspNetPager1);原因好像是在IE6中,针对服务器控件的客户端调用__PostBack('AspNetPager1','2'),需要在服务器端声明回发事件才能生效。