如何在MVC中结合Front主题使用DataTables实现控制器数据传递至视图

Front主题内置的HSDatatables是基于原生DataTables做的二次封装，所有原生DataTables支持的配置项都可以通过初始化方法的第二个参数透传。结合MVC架构的Controller到View的数据流转规则，通常有两种可直接落地的实现方案，分别适配不同数据量级的业务场景。

这种方式直接在页面渲染时把所有表格数据传到前端，不需要额外发异步请求，适配百行以内的表格展示需求。

• 第一步：控制器构造并序列化表格数据
  在对应的Action方法中，把业务查询得到的表格列表序列化为JSON字符串，通过视图模型或ViewBag传到视图，以ASP.NET MVC为例：

public ActionResult Index()
{
    // 从业务层查询需要展示的表格原始数据
    var tableRows = _userRepo.GetUserList().Select(item => new {
        id = item.Id,
        userName = item.Name,
        contactEmail = item.Email,
        registerDate = item.RegisterTime.ToString("yyyy-MM-dd")
    }).ToList();
    // 序列化为安全的JSON字符串传到视图
    ViewBag.RawTableData = JsonConvert.SerializeObject(tableRows, new JsonSerializerSettings {
        StringEscapeHandling = StringEscapeHandling.EscapeHtml
    });
    return View();
}

• 第二步：视图准备符合组件要求的表格DOM
  按照组件的类名要求，写好表格的表头结构，tbody不需要提前写静态行，留给JS动态渲染：

<table class="js-datatable table table-hover">
  <thead>
    <tr>
      <th>用户ID</th>
      <th>用户名</th>
      <th>联系邮箱</th>
      <th>注册时间</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

• 第三步：修改初始化代码，注入控制器传递的数据
  原有的初始化代码只支持静态DOM渲染，需要在初始化时传入数据配置项，注意Razor输出JSON时要加Html.Raw避免转义失效：

$(document).on('ready', function () {
  // 解析控制器传到前端的JSON数据
  const tableData = JSON.parse(@Html.Raw(ViewBag.RawTableData));
  // 初始化组件时透传原生DataTables配置
  $.HSCore.components.HSDatatables.init('.js-datatable', {
    data: tableData,
    columns: [
      { data: 'id' },
      { data: 'userName' },
      { data: 'contactEmail' },
      { data: 'registerDate' }
    ],
    pageLength: 10,
    responsive: true
  });
});

当表格数据量超过千行，或者需要支持服务端搜索、排序时，优先用这种方案，减少首次页面加载的体积。

• 第一步：控制器编写适配DataTables规范的接口Action
  接口需要接收DataTables自动传递的分页、搜索参数，返回对应格式的JSON响应，适配MVC的路由规则：

public JsonResult GetPagedTableData()
{
    // 接收DataTables传递的标准服务端参数
    var draw = Request.Form["draw"];
    var startIndex = int.Parse(Request.Form["start"] ?? "0");
    var pageSize = int.Parse(Request.Form["length"] ?? "10");
    var searchKeyword = Request.Form["search[value]"];
    // 调用业务层实现分页、搜索、排序逻辑
    var pagedResult = _userRepo.GetPagedUsers(startIndex, pageSize, searchKeyword);
    // 返回符合DataTables响应格式的结构
    return Json(new {
        draw = draw,
        recordsTotal = pagedResult.TotalCount,
        recordsFiltered = pagedResult.TotalCount,
        data = pagedResult.Items
    }, JsonRequestBehavior.AllowGet);
}

• 第二步：修改组件初始化配置，绑定异步接口地址
  开启组件的服务端模式，把接口地址配置到初始化参数中，组件会自动处理分页、搜索的请求发送和数据渲染：

$(document).on('ready', function () {
  $.HSCore.components.HSDatatables.init('.js-datatable', {
    processing: true,
    serverSide: true, // 开启服务端渲染模式
    ajax: {
      url: '@Url.Action("GetPagedTableData", "Home")', // 用MVC内置方法生成路由地址，避免路由规则变更导致接口404
      type: 'POST'
    },
    columns: [
      { data: 'id' },
      { data: 'userName' },
      { data: 'contactEmail' },
      { data: 'registerDate' }
    ]
  });
});

实现注意事项

• 不需要修改Front主题自带的HSDatatables核心源码，所有自定义配置都通过init方法的第二个参数透传，避免后续主题升级时自定义逻辑被覆盖
• 用预渲染全量数据模式时，单页数据量建议控制在1000行以内，过大会拉长页面首次加载时间，超过阈值优先选用异步接口模式
• 控制器输出JSON时注意处理特殊字符转义，避免前端解析时报语法错误

内容的提问来源于stack exchange，提问作者Zain Nabi