Layui Table 表格

首先引用jquery和layui.js插件

<script src="~/Plugins/jquery-3.2.1.min.js"></script>

<script src="~/Plugins/layui/layui.js"></script>

视图：jquery部分

var layer, layuiTable;//

        var tabAcademe;//

        $(function () {

            //layui模块的使用

            layui.use(['table', 'layer'],
function (args) {

                layer = layui.layer;

                layuiTable = layui.table;

                //表格初始化

                tabAcademe =
layuiTable.render({

                    elem: "#tabAcademe",//html table id

                  url:
"/SystemManagement/CollegeInfor/SelectAcademeAll",//数据接口

                    cols: [[ //表头

                      { type: 'radio', fixed:
'left' },//单选框列,fixed:'left' 将列固定在左边

                        { type: 'numbers', title: '序号' },//序号列，title设定标题名称

                        { field: 'AcademeID',
title: 'AcademeID', hide: true },//hide:true 隐藏列

                        { field: 'AcademeName',
title: '学院名称' },

                        { field: 'AcademeCode',
title: '学院代号' },

 

                    ]],

                    //开启分页

                    page: {

                        limit: 10,//指定每页显示的条数

                        limits: [5, 10, 15, 20,
25, 30, 35, 40, 45, 50],//每页条数的选择项

                    }, 

                });

            });

        });

2控制器部分：

public ActionResult
CollegeInfor()//视图

        {

            return View();

        }

        public ActionResult
SelectAcademeAll(LayuiTablePage layuiTablePage)

        {

            var varLinq = from tbAcademe in myModel.SYS_Academe

                          orderby tbAcademe.AcademeID select tbAcademe;

            //查询总行数

           //int totalRow = (from tbAcademe in myModel.SYS_Academe

                           // orderby tbAcademe.AcademeID

                           // select tbAcademe).Count();   //1

                int totalRow = varLinq.Count();           //2

            //分页查询SYS_Academe的数据

            //Skip  Take使用前必须要使用orderby

  List<SYS_Academe> list = varLinq

                                    
.Skip(layuiTablePage.GetStartIndex())

                                    
.Take(layuiTablePage.limit)

 .ToList();

            //封装layui Table

            LayuiTableData<SYS_Academe>
layuiTableData = new LayuiTableData<SYS_Academe>

        {

            count = totalRow,

            data = list

        };

            //返回JSON

            return Json(layuiTableData,
JsonRequestBehavior.AllowGet);

}

封装两个实体类：

1.  
namespace
CQUDBootstrap4.EntityClass

{

    /// <summary>

    /// layui table组件分页请求数据封装

    /// </summary>

    public class LayuiTablePage

    {

        /// <summary>

        /// page 代表当前页码

        /// </summary>

        public int page { get; set; }

        /// <summary>

        /// limit 代表每页数据量

        /// </summary>

        public int limit { get; set; }

        /// <summary>

        /// 分页开始序号

        /// </summary>

        /// <returns></returns>

        public int GetStartIndex()

        {

            return (page - 1) * limit;

        }

        /// <summary>

        /// 分页结束序号

        /// </summary>

        /// <returns></returns>

        public int GetEndIndex()

        {

            return page * limit - 1;

        }

    }

}

2.  
namespace
CQUDBootstrap4.EntityClass

{

    public class LayuiTableData<T>

    {

        /// <summary>

        /// 数据状态码 -- 可以不设置

        /// </summary>

        public int code { get; set; }

 

        /// <summary>

        /// 状态信息 -- 可以不设置

        /// </summary>

        public string msg { get; set; }

 

        /// <summary>

        /// 总行数

        /// </summary>

        public int count { get; set; }

        /// <summary>

        /// 数据

        /// </summary>

        public List<T> data { get; set; }

    }

}