如何将MongoDB中Turma模型的conteudo数据正确渲染到DataTable表格

问题修复方案 #

核心问题梳理

• EJS模板注入的_conteudo被错误转为字符串，不是可用的JS数组
• 前端逻辑冗余调用了不必要的AJAX请求，未使用服务端提前注入的conteudo数据
• DataTable配置重复定义columns属性，导致列配置被覆盖
• 字段映射错误，使用了conteudo数组中不存在的curso、nome字段
• 可选：Turma查询未关联curso表，无法拿到课程名称字段

各文件修复代码

1. conteudos.ejs

去掉_conteudo外层单引号，改用非转义输出标签避免JSON引号被转义

<!--begin::DataTable-->
<div class="card card-custom">
  <div class="card-header flex-wrap border-0 pt-6 pb-0">
    <div class="card-title">
      <h3 class="card-label font-weight-bolder">
        Listagem de Conteúdos em Turmas
        <span class="d-block text-muted pt-2 font-size-sm"></span>
      </h3>
    </div>
  </div>
  <div class="card-body card-custom ">
    <!--begin: Datatable-->
    <table class="table table-separate table-head-custom table-checkable " id="kt_datatable_2">
    </table>
    <!--end: Datatable-->
  </div>
</div>
<script>
  const _idTurma = '<%= req._idTurma %>';
  // 去掉外层单引号，用<%- 输出不转义的JSON字符串
  const _conteudo = <%- JSON.stringify(turma.conteudo.map(c => ({_id: c._id, titulo: c.titulo, tipo: c.tipo, payload: c.payload}))) %>;
  // 额外注入课程名，不需要可以删掉
  const _cursoNome = '<%= turma.curso.nome %>';
</script>

2. conteudos.js

删掉不必要的AJAX请求，修复DataTable的列配置和字段映射

$(document).ready(function() {
  // 直接用服务端注入的_conteudo变量，不需要额外发请求
  $('#kt_datatable_2').DataTable({
    data: _conteudo.map(c => [
      c._id,
      _cursoNome, // 用提前注入的课程名，不需要可以替换成c.tipo展示内容类型
      c.titulo,
    ]),
    columnDefs: [{
      targets: [0,1,2],
      width: 'auto',
      className: 'text-center',
    }],
    // 合并columns配置为一个数组，不要重复定义
    columns: [
      {
        title: 'ID',
        width: '150px',
      },
      {
        title: 'Curso',
        width: '150px',
      },
      {
        title: 'Título',
        width: '150px',
      }
    ],
    "language": {
      "decimal": "",
      "emptyTable": "Nenhuma inscrição disponível nessa turma.",
      "info": "Mostrando _START_ a _END_ de _TOTAL_ registros",
      "infoEmpty": "Mostrando 0 para 0 de 0 registros",
      "infoFiltered": "(filtrado de _MAX_ total registros)",
      "infoPostFix": "",
      "thousands": ",",
      "lengthMenu": "Mostrando _MENU_ registros",
      "loadingRecords": "Carregando...",
      "processing": "Processando...",
      "search": "Busca:",
      "zeroRecords": "Nenhum registro encontrado",
      "paginate": {
        "first": "Primeiro",
        "last": "Último",
        "next": "Próximo",
        "previous": "Anterior"
      },
      "aria": {
        "sortAscending": ": activate to sort column ascending",
        "sortDescending": ": activate to sort column descending"
      }
    },
    mobile: {
      layout: 'compact'
    },
    responsive: true,
  });
});

3. 可选：调整Turma查询逻辑（route.js或TurmaService中修改）

如果你需要展示课程名称，需要在查询Turma时关联curso表，示例在TurmaService.buscarPorId方法中修改查询语句：

// 原查询逻辑增加populate('curso')
await Turma.findById(id).populate('curso', 'nome')

内容的提问来源于stack exchange，提问作者Rafael Lisboa