DataGrid Html版分页+数据格式化

需求：

　　通过Html代码 用DataGrid显示数据（分页）及数据格式化

界面效果：

View Code:

@{
    Layout = "_Master";
    ViewData["Title"] = "首件检验配置--列表";
    /*
    Create by Snow 2020/08/20
    DataGrid001
    Html版查询 +  数据格式化（formatter）  
    */
}
<div id="cc" class="easyui-layout" style="100%;height:100%;" fit="true">
    <div data-options="region:'north',title:'Searching',iconCls:'icon-search'" style="height:65px;">
        <table >
            <tr>
                <td>订单号:</td>
                <td><input type="text" id="orderId" class="easyui-textbox" /></td>
                <td>
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="Search()">查 询</a>
                </td>
            </tr>
        </table>
    </div>
    <div data-options="region:'center',title:'List',iconCls:'icon-sum'">
        <table id="dg" class="easyui-datagrid" url="/FirstCheck/GetRecordList" iconCls="icon-save" rownumbers="true" pagination="true">
            <thead>
                <tr>
                    <th field="orderId" width="80">订单号</th>
                    <th field="specId" width="100" formatter="SetSpec">工序</th>
                    <th field="sn" width="150">条码</th>
                    <th field="result" width="100" >测试结果</th>
                    <th field="troubleId" width="100">故障代码</th>
                    <th field="creator" width="100">创建人</th>
                    <th field="createTime" width="150">创建日期</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
<script type="text/javascript">
    function Search() {
        $('#dg').datagrid('load',{
        orderId: $('#orderId').val()
    });
    }

    function SetSpec(val, row, index) {
        if (row.procedure) {
            return row.procedure.name;
        } else {
            return value;
        }
    }
</script>

Controller:注意json对象里必须有Total,rows两字段

 /// <summary>
        /// 检验记录列表 入口 
        /// </summary>
        /// <returns></returns>
        public IActionResult RecordList()
        {
            return View();
        }

        public IActionResult GetRecordList(string orderId, int page, int rows)
        {
            try
            {
                IList<FirstCheckRecord>  firstCheckRecordList = new List<FirstCheckRecord>();
                FirstCheckRecordBLL bll = new FirstCheckRecordBLL();
                int intTotal;
                firstCheckRecordList = bll.GetPageList(orderId, rows, page, out intTotal);

                var result = new { total = intTotal, rows = firstCheckRecordList };
                return Json(result);
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }

Data.dll (数据层，BLL层就不贴了)

 public IList<FirstCheckRecord> GetPageList(string orderId, int pageSize, int pageIndex, out int total)
        {
            var query = this.dbEntity.AsQueryable();
            if (!string.IsNullOrEmpty(orderId))
            {
                query = query.Where(p => p.OrderId == orderId);
            }
            query = query.Include(c => c.Procedure);
            total = query.Count();
            return query.Skip(pageSize * (pageIndex - 1)).Take(pageSize).ToList();
        }