首页 > WEB扩展 > MVC > 正文

MVC异步分页代码分享

2020-04-24 21:08:01
字体:
来源:转载
供稿:网友

如图:

 

1、控制器代码 

//    // GET: /AjaxUser/    shopEntities shop = new shopEntities();    public ActionResult Index()    {      return View();    }    public ActionResult loadjson()    {      int pageSize = Request["pageSize"] == null ? 10 : int.Parse(Request["pageSize"]);      int pageIndex = Request["pageIndex"] == null ? 1 : int.Parse(Request["pageIndex"]);      int totalCount = shop.tbl_admin.Count();       //给前台userinfo所有的数据,并且是json格式      var allorder = shop.tbl_admin.OrderBy(u=>u.id)        .Skip(pageSize*(pageIndex-1))        .Take(pageSize)        .ToList();      //接受一个对像,内部把此对象使用javaScript序列化类对象志字符串,发送到前台      var data = from u in allorder select new { u.id,u.realname,u.sex};      string strNav = PageNavHelper.ShowPageNavigate(pageIndex,pageSize,totalCount);      var result = new {Data=data, NavStr=strNav };      return Json(result, JsonRequestBehavior.AllowGet);    }

2、Html代码 

@{  Layout = null;}<!DOCTYPE html><html><head>  <meta name="viewport" content="width=device-width" />  <title>Index</title>  <link href="~/Content/NavPage.css" rel="stylesheet" />  <script src="~/Scripts/jquery-1.8.2.min.js"></script>  <script src="~/Scripts/jquery-ui-1.8.24.js"></script>  <script src="~/Scripts/jquery.easyui.min.js"></script>  <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>  <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>  <script type="text/javascript">    $(function () {      //页面加载完成后从后如加载当前页数据      initTable();    });  //初始化表格数据    function initTable(queryData)     {      $.getJSON("/AjaxUser/loadjson",queryData, function (data) {        var tb = $("#tbList");        //先移除旧的,添加新的        $("#tbList tr[type=data]").remove();        for (var i = 0; i < data.Data.length; i++)        {           var strTr = "<tr type='data'>";          strTr += "<td>" + data.Data[i].id + "</td>";          strTr += "<td>" + data.Data[i].realname + "</td>";          strTr += "<td>" + data.Data[i].sex + "</td>";          strTr += "<td><a UId='" + data.Data[i].id + "' href='javascript:void(0)'>修改</a>" +            "<a UId='" + data.Data[i].ID + "' href='javascript:void(0)'>删除</a></td>";          strTr += "</tr>";          tb.append(strTr);        }        $("#Nav").html(data.NavStr);        //绑定分页标签的点击事件        $(".pageLink").click(function () {          //把页码弹出来          var strHref = $(this).attr("href");          var queryStr = strHref.substr(strHref.indexOf('?') + 1);          //alert(queryStr);          initTable(queryStr);          return false;        });      });    }  </script></head><body>  <div>    <table id="tbList">      <tr>        <td>id</td>        <td>姓名</td>        <td>性别</td>        <td>操作</td>      </tr>    </table>    <div id="Nav" class="paginator">     </div>       </div></body></html>             
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表