使用Easyui pagination分页控件进行分页

Home控制器

using DbService;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Script.Serialization;

namespace MvcAppEF.Controllers
{
    public class HomeController : Controller
    {
        public string Content(int pageNumber, int pageSize) //参数:(当前页,页大小)
        {
            salesEntities db = new salesEntities();
            var countDdata = db.Set<T_UserInfo>().Count(); //获取数据总条数;

            var list = db.Set<T_UserInfo>().OrderBy(r => r.Id).Skip((pageNumber - 1) * pageSize).Take(pageSize).ToList();

            JavaScriptSerializer jsz = new JavaScriptSerializer();
            var x = new
            {
                countDdata = countDdata,
                list = list
            };
            var result = jsz.Serialize(x);
            return result;

        }
        public ActionResult Index6()
        {
            return View();
        }
    }
}

视图

@{
    Layout = null;
}
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index6</title>
    <script src="~/Scripts/jquery-1.8.2.js"></script>
    <script src="~/jquery-easyui/jquery.easyui.min.js"></script>
    <script src="~/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
    <link href="~/jquery-easyui/themes/default/easyui.css" rel="stylesheet" />
</head>
<body>
    <table id="t1" border="1">
        <tr><td>编号</td><td>用户名</td><td>姓名</td><td>年龄</td><td>邮箱</td></tr>
    </table>
    <div id="box" style="border:1px solid #ccc"> </div>
</body>
</html>
<script type="text/javascript">
    var countData;
    //先用同步的方式,获取一下数据总条数据。在加载一次初始数据。
    $(function () {
        $.ajax({
            url: "/Home/Content",
            async:false, //
            data: { pageNumber: 1, pageSize: 10 },
            success: function (data) {
                var jsonObj = $.parseJSON(data);
                countData = jsonObj.countDdata;
                $.each(jsonObj.list, function (key,val) {
                    var tr = "<tr><td>" + val.Id + "</td><td>" + val.UserName + "</td><td>" + val.Name + "</td><td>" + val.Age + "</td><td>" + val.Email + "</td></tr>"
                    $("#t1").append(tr);
                })
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest.status);
            }
        })
    })
   
    $(function () {        
        $("#box").pagination({
            total: countData, //数据总条数
            pageSize: 10,//页大小,即每页显示多少条数据
            pageNumber: 1,//当前页
            pageList: [5, 10, 15, 20], //5表示页显示5条数据。10条是每页显示10条数据  15表示每页显示15条数据,20表示每页显示20条数据

            //用户选择一个新的页面的时候触发此事件,可以传递2个惨(pageNumber, pageSize)分别表示当前页,和页大小
            onSelectPage: function (pageNumber, pageSize) {
                $.ajax({
                    url: "/Home/Content",
                    data: { pageNumber: pageNumber, pageSize: pageSize },
                    success: function (data) {
                        var jsonObj = $.parseJSON(data);
                        //清空除第一行意外的所有行
                        $("#t1 tr:first").nextAll().remove();
                        $.each(jsonObj.list, function (key, val) {
                            var tr = "<tr><td>" + val.Id + "</td><td>" + val.UserName + "</td><td>" + val.Name + "</td><td>" + val.Age + "</td><td>" + val.Email + "</td></tr>"
                            
                            $("#t1").append(tr);
                        })
                    }
                })
            }
        })

    })           
</script>



  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值