css - 通过javascript添加时复选框未使用正确的gentelella css呈现

Question

我正在尝试在数据表中添加一些行数据，首先是通过 Pug，然后是通过 javascript。

我添加了通过控制器调用获取数据的第一行，然后通过 pug 解析添加它：

<div class="x_content">
<table id="datatable-buttons" class="table table-striped table-bordered bulk_action">
  <thead>
    <tr>
      <th>
        <th>Aprovado</th>
      </th>
      <th>Nome</th>
      <th>Email</th>
      <th>Data de nascimento</th>
      <th>Cidade</th>
      <th>Gênero</th>
      <th>Escolaridade</th>
      <th>Instituição de ensino</th>
      <th>Semestre</th>
      <th>Token</th>
      <th>Selection Status</th>
    </tr>
  </thead>

  <tbody>
    for candidate in candidates
      - var formatedCandidate = candidateService.formatCandidateForDataTable(candidate, newTrueCheckbox, newFalseCheckbox);
      <tr>
        <td>
          <th>
            if formatedCandidate.isCandidateApproved
              <input type="checkbox" id="check-all" class="flat" checked>
            else
              <input type="checkbox" id="check-all" class="flat">
          </th>
        </td>
        <td>
          = formatedCandidate.name
        </td>
        <td>
          = formatedCandidate.email
        </td>
        <td>
          = formatedCandidate.bornDate
        </td>
        <td>
          = formatedCandidate.city
        </td>
        <td>
          = formatedCandidate.gender
        </td>
        <td>
          = formatedCandidate.educationLevel
        </td>
        <td>
          = formatedCandidate.educationInstitution
        </td>
        <td>
          = formatedCandidate.educationSemester
        </td>
        <td>
          = formatedCandidate.token
        </td>
        <td>
          = formatedCandidate.selectionStatus
        </td>
      </tr>
  </tbody>
</table>

这样，它设法以正确的样式呈现复选框：

稍后，我尝试通过“重新加载”按钮更新行，通过获取请求获取数据，然后通过 javascript 添加行：

$.get("candidates/getCandidatesForTable", function(candidatesArray){
    candidateTable.clear().draw();
    candidatesArray.forEach((candidate, index) => {
        debugger;
            if (candidate[1]) {
                candidate[1] = `<th>
                                    <input type="checkbox" id="check-all" class="flat" checked/>
                                </th>`;
            } else {
                candidate[1] = `<th>
                                    <input type="checkbox" id="check-all" class="flat"/>
                                </th>`;
            }
        candidateTable.row.add(candidate).draw();
    });
});

虽然我通过 javascript 使用与通过 pug 添加的相同属性插入了 HTML 代码，但复选框的呈现方式不同：它被呈现，但 css 样式现在消失了：

我应该如何通过 javascript 添加复选框并仍然获得正确的 css 样式？