Js+C#.Net+AjaxPro实现无刷新分页

配置好AjaxPro，然后什么都不说了 直接贴代码。

 

前台：

<style type="text/css">
    *{ margin:0px; padding:0px; list-style-type:none; font-family:"宋体"; font-size:14px;}
    a{ text-decoration:none;}
    a:hover{ text-decoration:underline;}
    #dataBox{ float:left; height:200px; width:500px; clear:both;}
    #dataBox li{ width:500px; height:30px; line-height:30px;text-overflow:ellipsis; white-space:nowrap;overflow:hidden; cursor:pointer; }
    #dataBox li a{ color:#666;}
    #pagerBar{ float:left; display:inline; width:500px; height:20px; overflow:hidden; clear:both; text-overflow:ellipsis; white-space:nowrap;}
    #pagerBar a{ float:left; display:inline; height:17px; width:20px; border:1px solid #ccc; text-align:center; line-height:17px; cursor:pointer; margin:1px; color:blue;}
    #pagerBar a.outlink{ background:#fff}
    #pagerBar a.onlink{ background:red;}
    #pagerBar span{ float:left; display:inline; height:17px; width:30px; border:1px solid #ccc; text-align:center; line-height:17px; cursor:pointer; margin:1px; color:Blue;}
</style>

    <div id="dataBox"></div>
    <div id="pagerBar"></div>

 

后台：

protected void Page_Load(object sender, EventArgs e)
    {
        AjaxPro.Utility.RegisterTypeForAjax(typeof(AjaxPagerTest));//注册AjaxPro
    }
    [AjaxPro.AjaxMethod]
    public IList<Post> GetAllPostByPage(int pageSize, int pageIndex)//分页获取数据
    {
        int pastCount = pageIndex * pageSize;
        string connstr = ConfigurationManager.ConnectionStrings["connstr"].ConnectionString;
        SqlConnection conn = new SqlConnection(connstr);
        SqlCommand comm = new SqlCommand("select top(" + pageSize + ")* from Post where PostID not in (select top(" + pastCount + ") PostID from Post where PostUserID=13) and PostUserID=13", conn);
        SqlDataAdapter da = new SqlDataAdapter(comm.CommandText, conn);
        try
        {
            DataTable dtData = new DataTable();
            da.Fill(dtData);
            IList<Post> lis = new List<Post>();
            foreach (DataRow dr in dtData.Rows)
            {
                Post post = new Post();
                post.PostTypeName = dr["PostTypeName"].ToString();
                post.PostTitle = dr["PostTitle"].ToString();
                post.PostUserName = dr["PostUserName"].ToString();
                post.PostDate = Convert.ToDateTime(dr["PostDate"]);
                post.Hits = Convert.ToInt32(dr["Hits"]);
                lis.Add(post);
            }
            return lis;
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }
    [AjaxPro.AjaxMethod]
    public int GetPostCount()//获取数据总数
    {
        string connstr = ConfigurationManager.ConnectionStrings["connstr"].ConnectionString;
        SqlConnection conn = new SqlConnection(connstr);
        SqlCommand comm = new SqlCommand("select count(*) from Post where PostUserID=13", conn);
        try
        {
            conn.Open();
            int postCount = Convert.ToInt32(comm.ExecuteScalar());
            conn.Close();
            return postCount;
        }
        catch (Exception)
        {
            throw;
        }
    }

 

 前台：

<script type="text/javascript">
        var dataBox = document.getElementById('dataBox');//数据显示容器
        var pagerBar = document.getElementById('pagerBar');//页码条
        var pageSize = 6; //每页记录数
        var totalSize = getPostCount();//记录总数
        var pageLen = getPageLen();//页数
        var onIndex = 0;//选择页的序号
        //获得记录总数
        function getPostCount() {
            return AjaxPagerTest.GetPostCount().value;
        }
        //获得页数
        function getPageLen() {
            if (totalSize % pageSize == 0)
                return totalSize / pageSize;
            else
                return Math.ceil(totalSize / pageSize);
        }
        //加载页码条
        var pagerHtml = "<span id='prev'>上一页</span>";
        for (var i = 1; i <= pageLen; i++) {
            pagerHtml += "<a href='#'>" + i + "</a>"
        }
        pagerHtml += "<span id='next'>下一页</span>"
        pagerBar.innerHTML = pagerHtml;
        var pagerList = pagerBar.getElementsByTagName('a');//获得每一页
        var pagerPrev = document.getElementById('prev');//上一页
        var pagerNext = document.getElementById('next'); //下一页
        pagerList[onIndex].className = 'onlink'; //初始选中第一页
        getData(onIndex);//初始显示第一页数据
        //点击上一页
        pagerPrev.onclick = function() {
            if (onIndex != 0) {
                pagerList[onIndex].className = 'outlink';
                onIndex--;
                pagerList[onIndex].className = 'onlink';
                getData(onIndex);
            }
        }
        //点击下一页
        pagerNext.onclick = function() {
            if (onIndex != pageLen-1) {
                pagerList[onIndex].className = 'outlink';
                onIndex++;
                pagerList[onIndex].className = 'onlink';
                getData(onIndex);
            }
        }
        //点击每一页
        for (var i = 0; i < pageLen; i++) {
            pagerList[i].value = i;
            pagerList[i].onclick = function() {
                pagerList[onIndex].className = 'outlink';
                onIndex = this.value;
                pagerList[onIndex].className = 'onlink';
                getData(onIndex);
            };
        }
        //根据页码显示数据
        function getData(pageIndex) {
            var dataObj = AjaxPagerTest.GetAllPostByPage(pageSize, pageIndex).value;
            if ((totalSize % pageSize != 0) && (pageIndex == Math.floor(totalSize / pageSize)))
                var thisPageSize = totalSize % pageSize;
            else
                var thisPageSize = pageSize;
                var dataHtml = "<ul>";
                for (var i = 0; i < thisPageSize; i++) {
                    dataHtml += "<li><a href='#'>" + dataObj[i].PostTypeName + "|  " + dataObj[i].PostTitle + "|  " + dataObj[i].PostDate;
                    dataHtml += "|  " + dataObj[i].PostUserName + "|  " + dataObj[i].Hits + "</a></li>";
                }
                dataHtml += "</ul>";
                dataBox.innerHTML = dataHtml;
            }
        
    </script>

 

下面就是效果图了：

 

然后就没有然后了。。。