在ASP.NET-MVC中基于jquery的无刷新分页实现

每次使用都得翻前面的代码，给自己的使用增加了很多麻烦，索性今天就一起总结了，在方便我自己的同时希望也能对大家有所帮助。

直接上码：

1.要在前端界面中插入代码段（这个代码段要根据情况用高度剩余法或者绝对定位方法，固定到底部，否则他会随内容多少上下动）

 <div class="row">
        <div class="col-md-12">
            <div class="row Pager_Position">
                <form id="form1" runat="server">
                    <div id="container">
                        <div class="QueryDiv">
                            记录总条数：<span id="RecordsCount">0</span>&nbsp;&nbsp;总计页数：<span id="PagesCount">0</span>&nbsp;&nbsp;当前页码：<span id="CurrentPage">0</span>
                        </div>
                        <div class="QueryDiv">
                            每页显示：
                            <select id="selPageSize">
                                <option>5</option>
                                <option>10</option>
                                <option selected="selected">15</option>
                            </select>条&nbsp;&nbsp;跳转到：<input id="txtGoTo" type="text" value="1" />页<input id="btnGoTo" type="button" value="go" />&nbsp;<input id="btnFirst" type="button" value="第一页" />&nbsp;<input id="btnPre" type="button" value="上一页" />&nbsp;<input id="btnNext" type="button" value="下一页" />&nbsp;<input id="btnLast" type="button" value="最后页" />
                        </div>
                        <div class="QueryDiv">
                            <input id="btnQuery" type="button" value="提交查询" />
                        </div>
                        <br style="clear: both;" />
                    </div>
                </form>
            </div>
        </div>
    </div>

 高度剩余法样式表

/* start用户菜品展示部分 */
.hotel_position{
	height: 460px;
}
.Pager_Position {
	height: 90px;
	/*脚部的高度*/
}
/* end用户菜品展示部分 */
/* start后台新闻列表展示部分 */
.newsmanager_position{
	height: 650px;
}
/* end后台新闻列表展示部分 */

实际效果：

2.注册分页事件，即jquery实现异步的方法

注意：在go/第一页/上一页/下一页/最后页/提交查询处要更改地址（根据MVC路由规则更改即可）

 @*分页*@
    <script type="text/javascript">
        //禁用所有分页按钮
        $(function () {
            DisableButton();
            //dom元素加载完毕后，执行一次查询
            firstpage();
        });
        function DisableButton() {
            $("#btnFirst").attr("disabled", true);
            $("#btnPre").attr("disabled", true);
            $("#btnNext").attr("disabled", true);
            $("#btnLast").attr("disabled", true);
            $("#btnGoTo").attr("disabled", true);
        }
        //提交查询
        $(function () {
            //点击查询时候执行一次
            $("#btnQuery").click(firstpage);
        });
        //第一页
        $(function () {
            $("#btnFirst").click(function () {
                var currentPage = 1;
                var pageSize = $("#selPageSize").val(); //获取每页显示的条数
                //执行查询
                $.post("/WebHotelManage/News/ProcessRequest", {
                    "currentPage": currentPage,
                    "pageSize": pageSize
                },
                    function (data, status) {
                        // alert(data);
                        showResult(data, status);
                        $("#CurrentPage").text("1"); //当前页码为1
                        //控制按钮的使用
                        if (data != "0") {
                            $("#btnFirst").attr("disabled", true);
                            $("#btnPre").attr("disabled", true);
                            $("#btnNext").attr("disabled", false);
                            $("#btnLast").attr("disabled", false);
                        }
                    });

            });
        });
        //最后页
        $(function () {
            $("#btnLast").click(function () {
                var currentPage = $("#PagesCount").text();
                var pageSize = $("#selPageSize").val(); //获取每页显示的条数
                //执行查询
                $.post("/WebHotelManage/News/ProcessRequest", {
                    "currentPage": currentPage,
                    "pageSize": pageSize
                },
                    function (data, status) {
                        // alert(data);
                        showResult(data, status);
                        $("#CurrentPage").text(currentPage); //当前页码为最后一页
                    });
                if (currentPage == $("#PagesCount").text().toString()) {
                    $("#btnFirst").attr("disabled", false);
                    $("#btnPre").attr("disabled", false);
                    $("#btnNext").attr("disabled", true);
                    $("#btnLast").attr("disabled", true);
                }
            });
        });
        //上一页
        $(function () {
            $("#btnPre").click(function () {
                var currentPage = parseInt($("#CurrentPage").text()) - 1; //获取当前页码
                var pageSize = $("#selPageSize").val(); //获取每页显示的条数
                //执行查询
                $.post("/WebHotelManage/News/ProcessRequest", {
                    "currentPage": currentPage,
                    "pageSize": pageSize
                },
                    function (data, status) {
                        // alert(data);
                        showResult(data, status);
                        $("#CurrentPage").text(currentPage); //显示当前页码
                        //控制按钮的使用
                        if (currentPage == 1) {
                            $("#btnFirst").attr("disabled", true);
                            $("#btnPre").attr("disabled", true);
                            $("#btnNext").attr("disabled", false);
                            $("#btnLast").attr("disabled", false);
                        } else {
                            $("#btnFirst").attr("disabled", false);
                            $("#btnPre").attr("disabled", false);
                            $("#btnNext").attr("disabled", false);
                            $("#btnLast").attr("disabled", false);
                        }
                    });
            });
        });
        //下一页
        $(function () {
            $("#btnNext").click(function () {
                var currentPage = parseInt($("#CurrentPage").text()) + 1; //获取当前页码
                var pageSize = $("#selPageSize").val(); //获取每页显示的条数
                //执行查询
                $.post("/WebHotelManage/News/ProcessRequest", {
                    "currentPage": currentPage,
                    "pageSize": pageSize
                },
                    function (data, status) {
                        //alert(data);
                        showResult(data, status);
                        $("#CurrentPage").text(currentPage); //显示当前页码
                    });
                //控制按钮的使用
                if (currentPage == $("#PagesCount").text().toString()) {
                    $("#btnFirst").attr("disabled", false);
                    $("#btnPre").attr("disabled", false);
                    $("#btnNext").attr("disabled", true);
                    $("#btnLast").attr("disabled", true);
                }
                else {
                    $("#btnFirst").attr("disabled", false);
                    $("#btnPre").attr("disabled", false);
                    $("#btnNext").attr("disabled", false);
                    $("#btnLast").attr("disabled", false);
                }
            });
        });
        //跳转到
        $(function () {
            $("#btnGoTo").click(function () {
                var currentPage = parseInt($("#txtGoTo").val()); //获取当前页码
                if (isNaN(currentPage)) {
                    alert("跳转的页数不符合要求！")
                    return;
                }
                if (currentPage > parseInt($("#PagesCount").text()) || currentPage < 1) {
                    alert("跳转的页数不符合要求！")
                    return;
                }
                var pageSize = $("#selPageSize").val(); //获取每页显示的条数
                //执行查询
                $.post("/WebHotelManage/News/ProcessRequest", {
                    "currentPage": currentPage,
                    "pageSize": pageSize
                },
                    function (data, status) {
                        // alert(data);
                        showResult(data, status);
                        $("#CurrentPage").text(currentPage); //显示当前页码
                    });
                //按钮禁用
                if (currentPage == $("#PagesCount").text().toString()) {
                    $("#btnFirst").attr("disabled", false);
                    $("#btnPre").attr("disabled", false);
                    $("#btnNext").attr("disabled", true);
                    $("#btnLast").attr("disabled", true);
                } else if (currentPage == 1) {
                    $("#btnFirst").attr("disabled", true);
                    $("#btnPre").attr("disabled", true);
                    $("#btnNext").attr("disabled", false);
                    $("#btnLast").attr("disabled", false);
                }
            });
        });
        //显示查询结果列表
        function showResult(data, status) {
            //alert(data);
            var stuList = data.substring(0, data.indexOf("||")); //解析查询结果
            var info = data.substring(data.indexOf("||") + 2);
            $("#PagesCount").text(info.substring(0, info.indexOf("||"))); //获取总页数
            $("#RecordsCount").text(info.substring(info.indexOf("||") + 2)); //获取总记录数
            var list = $.parseJSON(stuList); //获取返回的“对象集合”,并转成jQuery能识别的JSON格式
            //alert(stuList);
            //alert(list);
            $("#stuList").html(""); //先清除以前的数据

            //遍历集合，并添加查询结果
            for (var i = 0; i < list.length; i++) {
                var date = ChangeDateFormat(list[i].PublishTime);
                var studiv = "<tr>"
                    + "<td>" + date + "</td>"
                    + " <td> <a href='/News/NewsDetail?newsId=" + list[i].NewsId + "' target='_blank'>" + list[i].NewsTitle + "</a></td>"
                    + " <td>" + list[i].CategoryName + "</td>"
                    + " <td class='book-title'>"
                    + " <a class='' href='/WebHotelManage/News/ShowNewsDetail?newsId=" + list[i].NewsId + "&categoryId=" + list[i].CategoryId + "'>修改</a>"
                    + " <a name='" + list[i].NewsId + "'class='btndelete' style='cursor:pointer'>删除</a>"
                    + " </td></tr>"

                $("#stuList").append(studiv); //使用append方法追加项目
            }
        }


        //触发查询按钮，自动查询方法（独立出来，便于重复调用）
        function firstpage() {
            var currentPage = 1;
            var pageSize = $("#selPageSize").val(); //获取每页显示的条数
            //执行查询
            $.post("/WebHotelManage/News/ProcessRequest", {
                "currentPage": currentPage,
                "pageSize": pageSize
            },
                function (data, status) {
                    //alert(data);
                    if (data != "0") {
                        $("#CurrentPage").text("1"); //当前页码为1
                        $("#btnFirst").attr("disabled", true);
                        $("#btnPre").attr("disabled", true);
                        $("#btnNext").attr("disabled", false);
                        $("#btnLast").attr("disabled", false);
                        $("#btnGoTo").attr("disabled", false);
                        showResult(data, status);
                    } else {
                        $("#stuList").html("");
                        $("#stuList").append("没有符合条件的查询结果！")
                        $("#CurrentPage").text("0");
                        $("#PagesCount").text("0");
                        $("#RecordsCount").text("0");
                        DisableButton();
                    }
                });
        }

        //将json转换过来的乱码日期格式转为正常格式
        function ChangeDateFormat(cellval) {
            var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var currentDay = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            var currentHour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
            var currentMinute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
            var currentSecond = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
            return date.getFullYear() + '-' + month + "-" + currentDay + " " + currentHour + ":" + currentMinute + ":" + currentSecond;
        }
    </script>

3. 分页控制器的编写

注意：向控制器传递页面展示数量和当前页码，通过这两个数据计算应该过滤多少数据，展示那些数据

//分页查询
        public ActionResult ProcessRequest(string pageSize, string currentPage)
        {
            //获取查询结果
            int pages = 0;
            int records = 0;

            List<News> stuListDis = new NewsManager().GetPagedData(
            Convert.ToInt32(pageSize), Convert.ToInt32(currentPage),
            out records, out pages);

            //将学员集合序列化为JSON格式的数据
            if (stuListDis.Count != 0)
            {
                JavaScriptSerializer jss = new JavaScriptSerializer();
                string stringList = jss.Serialize(stuListDis);//将当前list对象转换成字符串（JSON格式）
                stringList += "||" + pages + "||" + records;
                //返回结果
                //context.Response.Write(stringList);
                ViewBag.list = stringList;
                return Content(ViewBag.list);
            }
            else
                //context.Response.Write("0");
                ViewBag.list = 0;
            return Content(ViewBag.list);
        }

4.分页业务逻辑类的编写

注意：该方法通过，每页展示数量和页码作为输入参数，通过数据访问类返回的记录总数参数计算应该显示多少页，最后将记录总数，页数，和数据访问类返回的集合一起返回给控制器。

 /// <summary>
        /// 分页查询新闻列表
        /// </summary>
        /// <param name="pageSize"></param>
        /// <param name="currentPage"></param>
        /// <param name="recordsCount"></param>
        /// <param name="pageCount"></param>
        /// <returns></returns>
        public List<News> GetPagedData(int pageSize, int currentPage,
           out int recordsCount, out int pageCount)
        {
            //获取查询列表
            int records = 0;
            List<News> list = objService.GetPagedData(pageSize, currentPage, out records);
            //计算符合要求的记录总页数
            int pages = 0;
            if (records != 0)
            {
                if (records % pageSize != 0)
                    pages = records / pageSize + 1;
                else
                    pages = records / pageSize;
            }
            //设置返回参数和结果
            recordsCount = records;
            pageCount = pages;
            return list;
        }

5.分页数据访问类的编写

注意：

1.将传递过来的页面展示数量和当前页计算过滤的数量，将当前页面展示的数量和过滤数量作为参数以存储过程的方式传递给数据库。

2.在这里笔者并没有采用EF框架，而是又建了一个SQLHelper，通过ADO.NET直接对数据库进行访问，提高了访问效率，也更加灵活了。

 /// <summary>
        /// 分页查询新闻信息
        /// </summary>
        /// <param name="pageSize">每页显示的条数</param>
        /// <param name="currentPage">当前页码</param>
        /// <param name="recordsCount">返回的记录总数</param>
        /// <returns>返回记录列表</returns>
        public List<News> GetPagedData(int pageSize, int currentPage, out int recordsCount)
        {
            //需要过滤的总数
            int filterCount = pageSize * (currentPage - 1);
            //封装参数
            SqlParameter[] param = new SqlParameter[]
            {
                new SqlParameter ("@PageSize",pageSize ),
                new SqlParameter ("@filterCount",filterCount)
            };
            //执行查询
            //SqlDataReader objReader = DAL.SQLHelper.GetReader("usp_DataPager", param);
            //使用ef框架进行查询
            //using (HotelDBmvcEntities EFDB=new HotelDBmvcEntities())
            //{
            //    var DishList = EFDB.Database.SqlQuery<Dishes>("execute usp_DataPager @PageSize @filterCount",param);
            //}

            SqlDataReader objReader = SQLHelper.GetReader("usp_NewsManger", param);
            //封装返回结果
            List<News> list = new List<News>();
            while (objReader.Read())
            {
                list.Add(new News()
                {
                    NewsId = Convert.ToInt32(objReader["NewsId"]),
                    NewsTitle = objReader["NewsTitle"].ToString(),
                    NewsContents =objReader["NewsContents"].ToString(),
                    PublishTime = Convert.ToDateTime(objReader["PublishTime"]),
                    CategoryId = Convert.ToInt32(objReader["CategoryId"]),
                    CategoryName= objReader["CategoryName"].ToString(),
                });
            }
            recordsCount = 0;
            if (objReader.NextResult())
            {
                if (objReader.Read())//返回记录总数
                    recordsCount = Convert.ToInt32(objReader["recordsCount"]);
            }
            objReader.Close();
            return list;  //返回数据列表
        }

SQLHelper的存储过程代码：

 /// <summary>
        /// 返回只读数据集的查询
        /// </summary>
        /// <param name="sql"></param>
        /// <returns></returns>
        public static SqlDataReader GetReader(string procName,SqlParameter [] param)
        {
            SqlConnection conn = new SqlConnection(connString);
            SqlCommand cmd = new SqlCommand(procName, conn);
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddRange(param);
            try
            {
                conn.Open();
                return cmd.ExecuteReader(CommandBehavior.CloseConnection);
            }
            catch (Exception ex)
            {
                conn.Close();
                throw ex;
            }
        }

6.数据库的存储过程的编写，该部分最为重要。

注意：

在这里将前面提到的当前页面数量和过滤数量传递进来进行查询

--创建分页的存储过程查询新闻列表
use HotelDBmvc
go
if exists(select *from sysobjects where name='usp_NewsManger')
drop procedure usp_NewsManger
go
create procedure usp_NewsManger
@PageSize int,
@filterCount int
as
	select top(@PageSize)  NewsId,NewsTitle,NewsContents,PublishTime,CategoryName,T1.CategoryId
	from HotelDBmvc.dbo.News as T1 inner join HotelDBmvc.dbo.NewsCategory as T2 on T1.CategoryId=T2.CategoryId 
	where NewsId not in
	(
			select top(@filterCount)  NewsId from HotelDBmvc.dbo.News  order by PublishTime desc
	)
	order by PublishTime desc
	--查询总的新闻条数
	select recordsCount=COUNT(*)from HotelDBmvc.dbo.News
go

7.完成以上步骤，就要对HTML静态页面进行动态添加了

注意：注释部分就是静态部分，这里使用了razor视图， <tbody id="stuList"></tbody>就是动态添加的地方

<table class="table table_color table-striped">
            <tr class="book_top">
                <th>发布时间</th>
                <th>新闻标题</th>
                <th>新闻分类</th>
                <th>操作</th>
            </tr>
            @*用tbody来接收，否则将会替换掉头部*@
            <tbody id="stuList"></tbody>

            @{
                @*foreach (News item in ViewBag.listNew)
                        {
                        <tr>
                        <td>@WebHotel.Models.UtilityHelper.ToShortDate(item.PublishTime)</td>
                        <td>
                            <a href='/News/NewsDetail?newsId=@item.NewsId' target="_blank">
                                @item.NewsTitle
                            </a>
                        </td>
                        <td>@item.NewsCategory.CategoryName</td>
                        <td class="book-title">
                            <a class="" href="/WebHotelManage/News/ShowNewsDetail?newsId=@item.NewsId&categoryId=@item.CategoryId">修改</a>
                            <a name=@item.NewsId class="btndelete" style="cursor:pointer">删除</a>
                        </td>
                    </tr>
                            }*@
            }

动态添加代码：将控制器返回的查询结果进行json转换处理后，进行添加

 //显示查询结果列表
        function showResult(data, status) {
            //alert(data);
            var stuList = data.substring(0, data.indexOf("||")); //解析查询结果
            var info = data.substring(data.indexOf("||") + 2);
            $("#PagesCount").text(info.substring(0, info.indexOf("||"))); //获取总页数
            $("#RecordsCount").text(info.substring(info.indexOf("||") + 2)); //获取总记录数
            var list = $.parseJSON(stuList); //获取返回的“对象集合”,并转成jQuery能识别的JSON格式
            //alert(stuList);
            //alert(list);
            $("#stuList").html(""); //先清除以前的数据

            //遍历集合，并添加查询结果
            for (var i = 0; i < list.length; i++) {
                var date = ChangeDateFormat(list[i].PublishTime);
                var studiv = "<tr>"
                    + "<td>" + date + "</td>"
                    + " <td> <a href='/News/NewsDetail?newsId=" + list[i].NewsId + "' target='_blank'>" + list[i].NewsTitle + "</a></td>"
                    + " <td>" + list[i].CategoryName + "</td>"
                    + " <td class='book-title'>"
                    + " <a class='' href='/WebHotelManage/News/ShowNewsDetail?newsId=" + list[i].NewsId + "&categoryId=" + list[i].CategoryId + "'>修改</a>"
                    + " <a name='" + list[i].NewsId + "'class='btndelete' style='cursor:pointer'>删除</a>"
                    + " </td></tr>"

                $("#stuList").append(studiv); //使用append方法追加项目
            }

8.最终完成效果