AJAX分页实践-优快云博客

本文链接：https://blog.youkuaiyun.com/qiaolei654658/article/details/7433610

在web中经常会用到数据的分页，但数据量较大的时候用ajax的无刷新分页是一件不错的事情，

下面是前台的步伐代码：

<head id="Head1" runat="server">
    <title></title>
    <script src="jquery-1.7.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var pageindex = 0;
            ajax.WebService1.GetCount(onSuccess, onFailed);
            function onSuccess(result) {
                totalpage = parseInt(result);
            }
            function onFailed() {
                alert('调用失败');
            }

            function GetData() {
                ajax.WebService1.DataBindArticle1(pageindex, onSuccess1, onFailed1);
            }
            function onSuccess1(result) {
                var array = result.split('|');

                var table = '<table border=1>';
                table += '<tr><td>标题</td><td>类别</td><td>点击量</td><td>作者</td><td>出版日期</td></tr>'
                for (var i = 0; i < array.length - 1; i++) {
                    var arrayj = array[i].split(',');
                    table += '<tr>';
                    for (var j = 0; j < arrayj.length; j++) {
                        table += '<td>' + arrayj[j] + '</td>';
                    }
                    table += '</tr>';
                }
                table += '</table>';
                $('#mydiv').html(table);
            }
            function onFailed1() {
                alert('调用失败');
            }

            $('#btnfirst').click(function () {
                pageindex = 1;
                $('#txtpageindex').val(pageindex);
                GetData();
            })
            $('#btnpre').click(function () {
                if (pageindex > 1) {
                    pageindex--;
                    $('#txtpageindex').val(pageindex);
                }

                GetData();
            })
            $('#btnnext').click(function () {
                if (pageindex < totalpage) {
                    pageindex++;
                    $('#txtpageindex').val(pageindex);
                }
                GetData();
            })
            $('#btnlast').click(function () {
                pageindex = totalpage;
                $('#txtpageindex').val(pageindex);
                GetData();
            })
            $('#btngo').click(function () {
                pageindex = $('#txtpageindex').val();
                GetData();
            })
            $('#btnfirst').click();
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
            <asp:ServiceReference Path="WebService1.asmx" />
        </Services>
    </asp:ScriptManager>
    <div id="mydiv">
    </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="最后一页" />
        <input id="txtpageindex" type="text" />
        <input id="btngo" type="button" value="GO" />
    </div>
    <div id="mydiv">
    </div>
    </form>
</body>
</html>

然后就是建立一个WebService，下面就是WebService的步伐代码：

 [WebMethod]
        public string DataBindArticle(int pageindex)
        {
            SqlConnection conn = new SqlConnection(strcon);
            SqlCommand cmd = conn.CreateCommand();
            cmd.CommandText = "PROFENYE";
            //表明调用的是存储过程
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@PAGESIZE", pagesize);
            cmd.Parameters.AddWithValue("@PAGEINDEX", pageindex);
            SqlDataAdapter adapter = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            adapter.Fill(dt);
            StringBuilder sb1 = new StringBuilder();
            sb1.Append("<table>");
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                string title = Convert.ToString(dt.Rows[i]["TITLE"]);
                string classname = Convert.ToString(dt.Rows[i]["CLASSNAME"]);
                string clickcount = Convert.ToString(dt.Rows[i]["CLICKCOUNT"]);
                string publisher = Convert.ToString(dt.Rows[i]["PUBLISHER"]);
                string published = Convert.ToString(dt.Rows[i]["PUBLISHED"]);
                sb1.Append("<tr>");
                string str = "<td>" + title + "</td>" + "<td>" + classname + "</td>" + "<td>" + clickcount + "</td>" + "<td>" + publisher + "</td>" + "<td>" + published + "</td>";
                sb1.Append(str+"</tr>");
            }
            sb1.Append("</table>");
            cmd.Dispose();
            conn.Close();
            conn.Dispose();
            return sb1.ToString();
        }

        //在客户端解析字符串
        [WebMethod]
        public string DataBindArticle1(int pageindex)
        {
            SqlConnection conn = new SqlConnection(strcon);
            SqlCommand cmd = conn.CreateCommand();
            cmd.CommandText = "PROFENYE";
            //表明调用的是存储过程
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@PAGESIZE", pagesize);
            cmd.Parameters.AddWithValue("@PAGEINDEX", pageindex);
            SqlDataAdapter adapter = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            adapter.Fill(dt);
            StringBuilder sb1 = new StringBuilder();
            
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                string title = Convert.ToString(dt.Rows[i]["TITLE"]);
                string classname = Convert.ToString(dt.Rows[i]["CLASSNAME"]);
                string clickcount = Convert.ToString(dt.Rows[i]["CLICKCOUNT"]);
                string publisher = Convert.ToString(dt.Rows[i]["PUBLISHER"]);
                string published = Convert.ToString(dt.Rows[i]["PUBLISHED"]);
                sb1.Append(title+","+classname+","+clickcount+","+publisher+","+published+"|");
            }
            
            cmd.Dispose();
            conn.Close();
            conn.Dispose();
            return sb1.ToString();
        }

        //返回list
        [WebMethod]
        public List<articleinfo> DataBindArticlelist(int pageindex)
        {
            SqlConnection conn = new SqlConnection(strcon);
            SqlCommand cmd = conn.CreateCommand();
            cmd.CommandText = "PROFENYE";
            //表明调用的是存储过程
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@PAGESIZE", pagesize);
            cmd.Parameters.AddWithValue("@PAGEINDEX", pageindex);
            SqlDataAdapter adapter = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            adapter.Fill(dt);
            List<articleinfo> list = new List<articleinfo>();

            for (int i = 0; i < dt.Rows.Count; i++)
            {
                string title = Convert.ToString(dt.Rows[i]["TITLE"]);
                string classname = Convert.ToString(dt.Rows[i]["CLASSNAME"]);
                string clickcount = Convert.ToString(dt.Rows[i]["CLICKCOUNT"]);
                string publisher = Convert.ToString(dt.Rows[i]["PUBLISHER"]);
                string published = Convert.ToString(dt.Rows[i]["PUBLISHED"]);
                articleinfo article = new articleinfo()
                {
                    Title = title,
                    Classname = classname,
                    Clickcount = clickcount,
                    Publisher = publisher,
                    Published = published
                };
                list.Add(article);
            }

            cmd.Dispose();
            conn.Close();
            conn.Dispose();
            return list;
        }
        //获取总的页数
        [WebMethod]
        public string GetCount()
        {
            int totalpagesize = 0;
            SqlConnection conn = new SqlConnection(strcon);
            SqlCommand cmd = conn.CreateCommand();
            cmd.CommandText = "select count(*) from ArticleInfo";
            conn.Open();
            object obj = cmd.ExecuteScalar();
            if (obj != null)
            {
                int totalrecord = Convert.ToInt32(obj);
                if (totalrecord % pagesize != 0)
                {
                    totalpagesize = totalrecord / pagesize + 1;
                }
                else
                {
                    totalpagesize = totalrecord / pagesize;
                }
            }
            cmd.Dispose();
            conn.Dispose();
            return totalpagesize.ToString();
        }

然后就可以分页了，这样可以避免了页面的频繁刷新给用户带来的不便，并且分页部分的代码是写在WebService里的可以再其他的地方多次调用，减少了工作量。