需求：

　　通過Html程式碼 用DataGrid顯示資料（分頁）及資料格式化

介面效果：

View Code:

@{
    Layout = "_Master";
    ViewData["Title"] = "首件檢驗配置--列表";
    /*
    Create by Snow 2020/08/20
    DataGrid001
    Html版查詢 +  資料格式化（formatter）  
    */
}
<div id="cc" class="easyui-layout" style="width: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();
        }