Флажок не отображается с правильной Gentelella CSS при добавлении через JavaScript - PullRequest
Новая
       33

Флажок не отображается с правильной Gentelella CSS при добавлении через JavaScript

0 голосов
/ 05 января 2019

Я пытаюсь добавить данные ряда строк в таблицу данных, сначала через 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>

Таким образом, ему удается отобразить флажок в правильном стиле:

Checkbox rendered right

Позже я пытаюсь обновить строки с помощью кнопки «перезагрузить», получая данные с помощью запроса get, а затем добавляя строки с помощью 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();
    });
});

Несмотря на то, что я вставил HTML-код через javascript, используя те же свойства, что и при добавлении через pug, флажок отображался иначе: он отображается, но стиль css теперь отсутствует:

Checkbox rendered wrong

Как мне добавить флажок через javascript и при этом получить правильный стиль CSS?

...