mvc 分页

使用StaticPagedList

public int pageSize = 1;   
        [HttpPost]
        public ActionResult AjaxPage(int? page)
        {
            int pageNum = page ?? 1;
            int totalCount = 0;
            Sys_UserSearchEntity sus = new Sys_UserSearchEntity();
            if (Request.Form["nameSearch"] != null)
            {
                sus.Name =Request.Form["nameSearch"].ToString();
            }              
            var userList = GetPerson(sus, pageNum, pageSize, ref totalCount);
            //注意,如果只搜索搜索某页数据,又想将totalCount以参数传入,则需要使用StaticPagedList
            var userAsIPagedList = new StaticPagedList<Sys_User>(userList, pageNum, pageSize, totalCount);
            //pager = userAsIPagedList.GetMetaData()返回PagedListMetaData对象,在这里进行了分页导航相关属性的封装
            return Json(new { users = userAsIPagedList, pager = userAsIPagedList.GetMetaData() },JsonRequestBehavior.AllowGet);
        }
        /// <summary>
        /// 获取数据
        /// </summary>
        /// <param name="searchentity">搜索 参数</param>
        /// <param name="pageIndex"></param>
        /// <param name="pageSize"></param>
        /// <param name="totalCount">返回数据总数</param>
        /// <returns></returns>
        protected List<Sys_User> GetPerson(Sys_UserSearchEntity searchentity, int pageIndex, int pageSize, ref int totalCount)
        {
            List<Sys_User> model = Sys_UserBusiness.GetSys_UserDataBySearchEntity(searchentity, pageIndex, pageSize, out totalCount);
            return model.ToList();
        }
<h4>这是采用PagedList.StaticPagedList和Json进行Ajax分页和搜索的例子,但是分页导航需要自己写javascript</h4>
<script type="text/javascript">
    $(function () {
        getPersonByAjax(1);
    });
    //Ajax请求
    var getPersonByAjax = function (pageNumber) {
        $.ajax({
            url: "/Sys_UserJson/AjaxPage?page=" + pageNumber,
            type: "POST",
            dataType: "json",
            beforeSend: function () {
                showLoading("数据加载中");
            },
            //加入搜索字符
            data: { nameSearch: $("#nameSearch").val() },
            success: function (data) {
                //接收数据(data)并绑定
                var html = "";              
                $.each(data.users, function (i, item) {
                    html += "<li>" + item.Name + " " + item.Email + " <a href='/User/Edit/" + item.ID + "'>Edit</a><>";
                });
                $("#personList").html(html);
                //下面的代码是创建分布导航
                var pager = data.pager;
                html = "";
                  //首页 上一页
                  if (pager.HasPreviousPage) {
                      html += "<a href='Javascript:void(0)' onclick='getPersonByAjax(1);return false;'>首页</a> <a href='Javascript:void(0)' onclick='getPersonByAjax(" + (pager.PageNumber - 1) + ");return false;'>上一页</a> ";
                  }
                  else {
                      html += " ";
                  }
                  html += " ";
                  // 1 2 3 4 5 6 
                  for (var i = 1; i <= pager.PageCount; i++)
                  {
                      if (i != pager.PageNumber)
                          html += " <a href='Javascript:void(0)' onclick='getPersonByAjax(" + i + ");return false;'>" + i + "</a> ";
                      else {
                          html += i;
                      }                   
                  }
                  //下一面 末页
                  if (pager.HasNextPage) {
                      html += "<a href='Javascript:void(0)' onclick='getPersonByAjax(" + (pager.PageNumber + 1) + ");return false;'>下一页</a> <a href='Javascript:void(0)' onclick='getPersonByAjax(" + pager.PageCount + ");return false;'>末页</a>";
                  }
                  else {
                      html += " ";
                  }
                  $("#pager").html(html);
                //分页导航结束
            },
            error: function (result) {
                alert(result.statusText);
            },
            complete: function (jqXHR) {
                hideLoading();
                jqXHR = null;
            }
        });
    }   
</script>
<input type="text" id="nameSearch" name="nameSearch" />
<input type="button" value="搜索" onclick="getPersonByAjax(1)" />
<ul id="personList">

</ul>
<div id="pager"></div>

 




posted @ 2015-12-25 09:59  zolz  阅读(112)  评论(0)    收藏  举报