客户端JS定时刷新分页

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

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

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