ASP.NET MVC+EasyUi 分页显示数据表格

直接上代码：其中SQLHelper类与连接数据库操作源码请查看我之前的文章，链接：ASP.NET MVC+Easyui 实现验证码登录

1.实体类（XJ.cs）

	public class XJ
    {
        public int id { get; set; }
        public string xh { get; set; }
        public string xm { get; set; }
        public int xbm { get; set; }
        public string nj { get; set; }
        public DateTime rxrq { get; set; }
        //学生类别
        public string xslb { get; set; }
        //所属院系
        public string yxsh { get; set; }
        //专业代码
        public string zydm { get; set; }
        //导师编号
        public string dsbh { get; set; }
        /// <summary>
        /// 学生类别
        /// </summary>
        public Dm_xslb dm_xslb { get; set; }
        /// <summary>
        /// 院系
        /// </summary>
        public Py_xs py_xs { get; set; }
        /// <summary>
        /// 专业
        /// </summary>
        public Py_zy py_zy { get; set; }
        /// <summary>
        /// 任课教师
        /// </summary>
        public Py_rkjs py_rkjs { get; set; }
    }

与之关联的其他实体类

（1）Dm_xslb.cs

	/// <summary>
    /// 学生类别
    /// </summary>
    public class Dm_xslb
    {
        //学生类别码
        public string xslbm { get; set; }
        //学生类别
        public string xslb { get; set; }
    }

（2）Py_xs.cs

	/// <summary>
    /// 院系
    /// </summary>
    public class Py_xs
    {
        //院系编号
        public string xsbh { get; set; }
        //院系名称
        public string xsmc { get; set; }
    }

（3）Py_zy.cs

	/// <summary>
    /// 专业
    /// </summary>
    public class Py_zy
    {
        //专业代码
        public string zydm { get; set; }
        //专业名称
        public string zymc { get; set; }
    }

（4）Py_rkjs.cs

	/// <summary>
    /// 任课教师
    /// </summary>
    public class Py_rkjs
    {
        //教师编号
        public string jsbh { get; set; }
        //教师性别
        public string jsxm { get; set; }
    }

2.Service层（XJService.cs）

	 public class XJService
    {
    	//分页查询
        public List<XJ> FindAllByPage(int start, int end)
        {
            List<XJ> xjs = new List<XJ>();
            string sql = " select *" +
                         " from(select row_number() over(order by xh asc) as num,*" +
                         " from xj) as t" +
                         " where t.num >= @start and t.num <= @end";
            SqlParameter[] pms = { new SqlParameter("start", start),new SqlParameter("end", end) };
            SqlDataReader reader = SQLHelper.ExecuteReader(sql, pms);
            while (reader.Read())
            {
                XJ xj = new XJ();
                xj.id = Convert.ToInt32(reader["id"]);
                xj.xh = reader["xh"].ToString();
                xj.xm = reader["xm"].ToString();
                xj.xbm = Convert.ToInt32(reader["xbm"]);
                xj.nj = reader["nj"].ToString();
                xj.rxrq = (DateTime)reader["rxrq"];
                xj.yxsh = reader["yxsh"].ToString();
                xj.dsbh = reader["dsbh"].ToString();
                xj.zydm = reader["zydm"].ToString();
                xj.xslb = reader["xslb"].ToString();
                Py_xs py_xs = py_xsService.FindByXsbh(xj.yxsh);
                xj.py_xs = py_xs;
                Py_rkjs py_rkjs = py_rkjsService.FindByJsbh(xj.dsbh);
                xj.py_rkjs = py_rkjs;
                Py_zy py_zy = py_zyService.FindByZydm(xj.zydm);
                xj.py_zy = py_zy;
                Dm_xslb dm_xslb = dm_xslbService.FindByXslbm(xj.xslb);
                xj.dm_xslb = dm_xslb;
                xjs.Add(xj);
            }
            reader.Close();
            return xjs;
        }
    }

3.视图层（XJList.cshtml）

（1）页面代码

<div>
    <!--数据表格-->
    <table id="dg" class="easyui-datagrid" toolbar="#toolbar"></table>
</div>

（2）jQuery代码

<script type="text/javascript">
    $(function () {
        //加载数据表格
        $('#dg').datagrid({
            title: '学籍信息',
            url: '/XJ/List',//获取数据
            method: 'get', //默认是post,不允许对静态文件访问
            width: '1080',
            height: '460',
            dataType: "json",
            striped: true,
            fitColumns: true,//字段是否适应表格
            singleSelect: false,//是否只能选中一行数据
            rownumbers: true, //是否加行号
            pagination: true, //是否显式分页
            pageSize: 10, //页容量，必须和pageList对应起来，否则会报错
            pageList: [10, 20, 30, 40, 50,100],
            pageNumber: 1, //默认显示第几页
            columns: [[//field的值同实体类的属性名相同即可
                { field: 'ckb', title: '', checkbox: true },
                { field: 'xh', title: '学号', width: 12, align: 'center' },
                { field: 'xm', title: '姓名', width: 8, align: 'center' },
                {
                    field: 'xbm', title: '性别', width: 5, align: 'center', formatter: function (value) {
                        if (value == 1) {
                            return "男";
                        } else {
                            return "女";
                        }
                    }
                },
                { field: 'nj', title: '年级', width: 8, align: 'center' },
                {
                    field: 'rxrq', title: '入学日期', width: 15, align: 'center', formatter: function (value) {
                        var dateMat = new Date(parseInt(value.replace("/Date(", "").replace(")/", ""), 10));
                        var year = dateMat.getFullYear();
                        var month = dateMat.getMonth() + 1;
                        if (month < 10) {
                            month = '0' + month;
                        }
                        var day = dateMat.getDate();
                        if (day < 10) {
                            day = '0' + day;
                        }
                        return year + "-" + month + "-" + day;
                    }
                },
                {
                    field: 'zydm', title: '专业', width: 15, align: 'center', formatter: function (value, row, index) {
                        return row.py_zy.zymc;
                    }
                },
                {
                    field: 'yxsh', title: '院系', width: 15, align: 'center', formatter: function (value, row, index) {
                        return new Object(row["py_xs"]).xsmc;
                    }
                },
                {
                    field: 'xslb', title: '学生类别', width: 15, align: 'center', formatter: function (value, row, index) {
                        return new Object(row["dm_xslb"]).xslb;
                    }
                },
                {
                    field: 'dsbh', title: '导师', width: 8, align: 'center', formatter: function (value, row, index) {
                        return new Object(row["py_rkjs"]).jsxm;
                    }
                }
            ]],
            onLoadSuccess: function () {
                //一定要加上这一句，要不然datagrid会记住之前的选择状态，删除时会出问题
                $('#dg').datagrid('clearSelections');
            }
        });
    });
</script>

4.控制层（XJController.cs）

注意：返回给页面的数据要为Json数据类型，并且需要给页面返回"rows"和"total"数据，返回多个Json数据类型时使用匿名类的方式

 	public class XJController : Controller
    {
    	XJService xjService = new XJService();
    	//分页查询所有学籍信息列表
        public ActionResult List()
        {
            int pageIndex = Convert.ToInt32(Request.Params["page"]);//easyUI默认传当前页码,固定参数为page
            int pageSize = Convert.ToInt32(Request.Params["rows"]);//easyUI默认传每页数据量,固定参数为rows
            int start = (pageIndex - 1) * pageSize + 1;
            int end = pageIndex * pageSize;
            List<XJ> xjs = xjService.FindAllByPage(start, end);
            int count = xjService.Count();
            return Json(new { rows = xjs, total = count }, JsonRequestBehavior.AllowGet);
        }
    }

本文完