asp.net ajax分页

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
    table
    {
        border:1px solid gray;
        width:700px;
        }
        table tr th,td
        {
             border:1px solid gray;            
            }
    </style>
    <script src="script/jquery-1.10.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var pageindex = 1;
            var pagesize = 10;
            var pagemax;
            pagemaxx();
            LoadArticleJs();


            /*页面首次加载时调用后台的LoadArticle方法填充第一页的数据*/
            function pagemaxx() {
                $.ajax({
                    type: "post",
                    contentType: "application/json",
                    url: "WebService1.asmx/pagemax",
                    data: "{pagesize:" + pagesize +"}",
                    success: function (date) {
                        pagemax = date.d;
                        dangqian();
                    },
                    error: function () {
                    alert('获取数据失败');
                }
                })
            }
            function dangqian()
            {
                $('#Label1').text( pageindex + "/" + pagemax);
            }


            function LoadArticleJs() {
                $.ajax({
                    type: "post",
                    contentType: "application/json",
                    url: "WebService1.asmx/LoadArticle",
                    data: "{pageindex:" + pageindex + ",pagesize:" + pagesize + "}",
                    success: function (data) {
                    /*通过调试发现data.d就是一个集合,包含10个元素,每个元素里面都有ArticleId,ArticleTitle,ArticleContent,UserName四个属性,所以通过拼接表格的方式将数据呈现出来*/
                        var strtable = "<table>";
                        strtable += "<tr><th>编号</th><th>标题</th><th>内容</th><th>作者</th></tr>"
                        for (var i = 0; i < data.d.length; i++) {
                            strtable += "<tr><td>" + data.d[i].ArticleId + "</td><td>" + data.d[i].ArticleTitle + "</td><td>" + data.d[i].ArticleContent + "</td><td>" + data.d[i].UserName + "</td></tr>";
                        }
                        strtable += "</table>";
                        $('#divArticle table').remove();
                        $('#divArticle').append(strtable);
                    },
                    error: function () {
                        alert('获取数据失败');
                    }
                })
            }
            //下一页
            $('#btnFirst').bind('click', function () {
                pageindex=1;
                LoadArticleJs();
                dangqian();
            })
            $('#btnPre').bind('click', function () {
                if (pageindex > 1)
                {
                pageindex--;
                LoadArticleJs();
                dangqian();
                }


            })
            $('#btnNext').bind('click', function () {
                if (pageindex < pagemax)
                {
                pageindex++;
                LoadArticleJs();
                dangqian();
                }


            })
            $('#btnLast').bind('click', function () {
                pageindex = pagemax;
                LoadArticleJs();
                dangqian();
            })
            $('#btngo').bind('click', function () {
                pageindex = $('#txt').val();
                if (pagemax > pageindex > 0) {
                    LoadArticleJs();
                    dangqian();
                }
                else {
                    
                    alert('超出总页数,请重新输入');
                }


            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="divArticle">
        </div>
        <div>
            <input id="btnFirst" type="button" value="第一页" />
            <input id="btnPre" type="button" value="上一页" />
            <input id="btnNext" type="button" value="下一页" />
            <input id="btnLast" type="button" value="最后一页" /><br />
            <input id="txt" type="text" /><asp:Label ID="Label1" runat="server" Text=""></asp:Label><input id="btngo" type="button" value="Go" />
        </div>
    </div>
    </form>
</body>

</html>


在WebService1.asmx中写

        [WebMethod]
        public int pagemax(int pagesize)
        {
            int pagemax1;
            string sqlstr = ConfigurationManager.ConnectionStrings["sqlserverstr"].ConnectionString;
            SqlConnection con = new SqlConnection(sqlstr);
            con.Open();
            SqlCommand cmd = con.CreateCommand();
            cmd.CommandText = "select count(*) from T_Article";
            int totalcount = Convert.ToInt32(cmd.ExecuteScalar());
            cmd.Dispose();
            con.Close();
            con.Dispose();
            if (totalcount % pagesize == 0)
            {
                pagemax1 = totalcount / pagesize;
            }
            else
            {
                pagemax1 = totalcount / pagesize + 1;
            }
            return pagemax1;
        }
        [WebMethod]
        public List<Article> LoadArticle(int pageindex, int pagesize)
        {
            DataTable dt = new DataTable();
            string sqlstr = ConfigurationManager.ConnectionStrings["sqlserverstr"].ConnectionString;
            using (SqlConnection conn = new SqlConnection(sqlstr))
            {
                using (SqlCommand cmd = conn.CreateCommand())
                {
                    cmd.CommandText = "select * from (select ROW_NUMBER() over(order by ArticleId) as rownumber,* from T_Article)t where t.rownumber>(@pageindex-1)*@pagesize and t.rownumber<=@pageindex*@pagesize";
                    cmd.Parameters.AddWithValue("@pageindex", pageindex);
                    cmd.Parameters.AddWithValue("@pagesize", pagesize);
                    SqlDataAdapter adapter = new SqlDataAdapter(cmd);
                    adapter.Fill(dt);
                }
            }
            List<Article> list = new List<Article>();
            if (dt.Rows.Count>0)
            {
                foreach (DataRow row in dt.Rows)
                {
                    Article myariticle = new Article();
                    myariticle.ArticleId = row["ArticleId"].ToString();
                    myariticle.ArticleTitle = row["ArticleTitle"].ToString();
                    myariticle.ArticleContent = row["ArticleContent"].ToString();
                    myariticle.UserName = row["UserName"].ToString();
                    list.Add(myariticle);
                }
            }
            return list;
        }
    }
    public class Article
    {
        public string ArticleId { get; set; }
        public string ArticleTitle { get; set; }
        public string ArticleContent { get; set; }
        public string UserName { get; set; }
    }


}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值