客户端JS定时刷新分页

      Asp.Net服务器端有相关分页的控件或者第三方的分页插件可以实现分页。我经常使用的AspNetPager组件就是一个非常好用的分页插件。但在某些特殊情况下，我们需要实现客户端的定时刷新分页，比如股票模拟大赛，下单后，今日委托的数据信息，可以在进入大赛的首页的左侧显示，每页显示五条记录，每五页是一组（即1 2 3 4 5 ...或 ... 1 2 3 4 5 ...）。当前页码红色字体显示，不可点击，刷新后，还是显示在当前页（... 是上一个五页的最后一页，点击后，跳转到上一个五页。或者是下一个五页的第一页，点击后，跳转到下一个五页【不足五页，有几页就显示几页】）。这个效果就是实现AspNetPager分页那样的效果。之所以要客户端定时刷新分页，是因为下单后，今日委托的数据会增加，这样会导致列表数据增加，页码也会增加。列表数据的更新也是用客户端脚本来更新，这里只谈分页的定时刷新。

      思路：需要保存当前的页码，刷新时，就可以取到这个的页码。这个页码可以用<input type="hidden"  runat="server" />来保存。执行客户端脚本setInterval("refushEntrust()", 5000)定时刷新分页。其中 refushEntrust()是执行刷新分页的函数。贴出代码来讲解：

< input  type ="hidden"  id ="hidLeftPageIndex"  name ="hidLeftPageIndex"  runat ="server"   />
< 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 >

function  refushEntrust() 
{
      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可以实现。

代码

[AjaxPro.AjaxMethod]
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')，需要在服务器端声明回发事件才能生效。