loner_li AJax 实现数据的无刷新分页实例（引用web服务文件和存储过程）

最新推荐文章于 2021-08-05 14:20:11 发布

liang_jqzd

最新推荐文章于 2021-08-05 14:20:11 发布

阅读量674

点赞数

分类专栏： AJax

本文链接：https://blog.csdn.net/angtoutianwai/article/details/8956884

版权

AJax 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前台HTML页

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无刷新分页</title>
    <style type="text/css">
        table
        {
            border: 1px solid #444;
            width: 800px;
            height: 800px;
        }
        table td
        {
            border: solid 1px #444;
        }
    </style>
    <script src="js/Jquery1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var pageindex = 1;
            var pagesize = 10;
            var lastpageindex = 1;
            /*如果将代码封装成一个函数，那么除非显示调用(loaddata())，否则函数中的代码不会执行
            根据传递的页码和每页显示的记录数量获取数据
            */
            loaddate();
            function loaddate() {
                $.ajax({
                    type: "post",
                    contentType: "application/json",
                    url: "WebService1.asmx/GetListAjax",
                    data: "{pagesize:" + pagesize + ",pageindex:" + pageindex + "}",
                    success: function (result) {

                        var strtable = "<table>";
                        strtable += '<tr><td>编号</td><td>标题</td><td>内容</td><td>创建时间</td></tr>';
                        for (var i = 0; i < result.d.length; i++) {
                            strtable += '<tr>';
                            strtable += '<td>' + result.d[i].Id + '</td>';
                            strtable += '<td>' + result.d[i].NewsTitle + '</td>';
                            strtable += '<td>' + result.d[i].NewsContent + '</td>';
                            strtable += '<td>' + result.d[i].CreateTime.toString("yyyy-MM-dd hh:mm:ss") + '</td>';
                            strtable += '</tr>';
                        }

                        strtable += '</table>';
                        $('#mydiv').html(strtable);
                    }
                });
            }

            //根据传递到后台的每页显示的记录数量来获取最大的页码(就是一共有多少页)
            $.ajax({
                type: "post",
                contentType: "application/json",
                url: "WebService1.asmx/GetLastPageindex",
                data: "{pagesize:" + pagesize + "}",
                success: function (result) {
                    lastpageindex = result.d;
                    //alert(lastpageindex);
                }
            });

            //首页
            $('a:first').click(function () {
                pageindex = 1;
                loaddate();
            });
            //上一页
            $('a:eq(1)').click(function () {
                if (pageindex > 1) {
                    pageindex--;
                    loaddate();

}

            });
            //下一页
            $('a:eq(2)').click(function () {
                if (pageindex < lastpageindex) {
                    pageindex++;
                    loaddate();
                }

            });
            //最后一页
            $('a:eq(3)').click(function () {
                pageindex = lastpageindex;
                loaddate();
            });

            //go
            $('a:last').click(function () {
                var goindex = $('#txtPageindex').val();
                pageindex = goindex;
                loaddate();
            });

        })
    </script>
</head>
<body>
    <div id="mydiv">
    </div>
    <div>
        <a href="#">第一页</a><a href="#">上一页</a><a href="#">下一页</a><a href="#">最后一页</a>
        <input id="txtPageindex" type="text" /><a href="#">Go</a>

    </div>
</body>
</html>

WebService1.asmx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;

namespace _0521存储过程
{
    /// <summary>
    /// WebService1 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
     [System.Web.Script.Services.ScriptService]
    public class WebService1 : System.Web.Services.WebService
    {

        [WebMethod]
        public string HelloWorld()
        {
            return "Hello World";
        }
        //分页获取数据列表
        [WebMethod]
        public List<Model.T_News1> GetListAjax(int pagesize,int pageindex)
        {
            BLL.T_News1 bnew = new BLL.T_News1();
            DataTable dt= bnew.GetListDataTable(pagesize,pageindex);
            List<Model.T_News1> list = new List<Model.T_News1>();
            int Id;
            string newstitle="";
            string newscontent="";
            string createtime;
            for (int i = 0; i < dt.Rows.Count; i++)
   {
    Id=Convert.ToInt32(dt.Rows[i]["Id"]);
                newstitle=dt.Rows[i]["NewsTitle"].ToString();
                newscontent=dt.Rows[i]["NewsContent"].ToString();
                createtime=Convert.ToDateTime(dt.Rows[i]["CreateTime"]).ToString("yyyy-MM-dd hh:mm:ss");

                Model.T_News1 news = new Model.T_News1() {
                Id = Id,
              NewsTitle = newstitle,
               NewsContent = newscontent,
                CreateTime = Convert.ToDateTime(createtime)

                };
                //news.Id = Id;
                //news.NewsTitle = newstitle;
                //news.NewsContent = newscontent;
                //news.CreateTime = createtime;
list.Add(news);

   }
            return list;
        }

        [WebMethod]
        public int GetLastPageindex(int pagesize)
        {
            BLL.T_News1 bnews = new BLL.T_News1();
            int totalcount= bnews.GetRecordCount("");
            if (totalcount % pagesize == 0)
            {
                return totalcount / pagesize;
            }
            else
            {
            return totalcount/pagesize+1;
            }

}
}
}

DataAccess层

DbHelperSQL.cs

        public static DataTable RunProcedureDataTable(string storedProcName, IDataParameter[] parameters)
        {
            using (SqlConnection connection = new SqlConnection(connectionString))
            {
                DataTable dt = new DataTable();
                connection.Open();
                SqlDataAdapter sqlDA = new SqlDataAdapter();
                sqlDA.SelectCommand = BuildQueryCommand(connection, storedProcName, parameters);
                sqlDA.Fill(dt);
                connection.Close();
                return dt;
            }
        }

DAL层

/// <summary>
        /// 分页获取数据列表
        /// </summary>
        public DataTable GetListDataTable(int PageSize, int PageIndex)
        {
            SqlParameter[] parameters = {

     new SqlParameter("@PageSize", SqlDbType.Int),
     new SqlParameter("@PageIndex", SqlDbType.Int)
     };

            parameters[0].Value = PageSize;
            parameters[1].Value = PageIndex;
            return DbHelperSQL.RunProcedureDataTable("pro_fenye", parameters);
        }

sqlserver 存储过程

CREATE PROC pro_fenye
@pagesize int,
@pageindex int
as
select * from(
select Row_number() over(order by Id) as rownumber,*from T_News1
)T
where rownumber>(@pageindex-1)*@pagesize AND rownumber<=@pageindex*@pagesize

exec pro_fenye 5,1