Фильтр поиска DataTable, сортировка и разбиение на страницы не работают после извлечения данных JSON с помощью Promise.fetch - PullRequest
Новая
       25

Фильтр поиска DataTable, сортировка и разбиение на страницы не работают после извлечения данных JSON с помощью Promise.fetch

0 голосов
/ 17 апреля 2020

У меня есть DataTable, который отображает JSON данных из выборки Promise. Он использует циклы над данными JSON и отображает их в tbody. Сейчас у меня проблема в том, что все строки извлеченных данных JSON отображаются в таблице без разбивки на страницы, а поисковый фильтр и сортировка столбцов также не работают.

Вот мой фрагмент кода: 

<table class="table table-striped table-hover" id="tierlist">
          <thead>
            <tr>
              <th></th>
              <th>Card Image</th>
              <th>Rarity</th>
              <th>Character</th>
              <th>Attribute</th>
              <th>R Factor Scene</th>
              <th>Overall STR</th>
              <th>HP</th>
              <th>SP</th>
              <th>ATK</th>
              <th>DEF</th>
              <th>HIT</th>
              <th>AVO</th>
              <th>LUK</th>
            </tr>
          </thead>

          <tbody id="datarows">
          </tbody>

</table>

<script type="text/javascript">
   var table = $('#tierlist').DataTable({
      responsive: true,
      initComplete: function () {
      $('.dataTables_filter input[type="search"]').css({ 'width': '50px', 'display': 'inline-block' });
      }
   });

    // Data URL
  const URL = "https://somedomain/data.json";

  // Promise fetch the data and display it
  fetch(URL)
    .then((response) => response.json())
    .then((cards) => datarows.innerHTML = displayCards(cards))
    .then(table.clear().draw());

  const displayCards = (cards) => {
    var out = "";
    var i;
    for(i = 0; i<cards.length; i++) {
      out += '<tr><td><img height="35" src="' + cards[i].skill + '" /></td>' +
          '<td><img height="70" src="' + cards[i].cardImage + '" /></td>' +
                '<td>' + cards[i].rarity + '</td>' + 
                '<td>' + cards[i].character + '</td>' + 
                '<td><img height="35" src="' + cards[i].attribute + '" /></td>' +
                '<td>' + cards[i].rFactorScene + '</td>' + 
                '<td>' + cards[i].STR + '</td>' + 
                '<td>' + cards[i].HP + '</td>' + 
                '<td>' + cards[i].SP + '</td>' + 
                '<td>' + cards[i].ATK + '</td>' + 
                '<td>' + cards[i].DEF + '</td>' + 
                '<td>' + cards[i].HIT + '</td>' + 
                '<td>' + cards[i].AVO + '</td>' + 
                '<td>' + cards[i].LUK + '</td></tr>' ; 
    }
    return out;
  };
</script>

Любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 18 апреля 2020

Данные, которые вы добавляете в таблицу в HTML, не добавляются в объект DataTable. Следующий jsfiddle решает вашу проблему, вместо того, чтобы добавлять извлеченные данные в таблицу HTML, добавлять их в объект DataTable и перерисовывать.

Здесь отображается важное отличие (addData заменяет displayCards): 

function addData(cards){
  cards.forEach(card => {
    table.row.add([
      '<img height="35" src="' + card.skill + '" />',
      '<img height="70" src="' + card.cardImage + '" />',
      card.rarity, 
      card.character,
      '<img height="35" src="' + card.attribute + '" />',
      card.rFactorScene,
      card.STR,
      card.HP,
      card.SP,
      card.ATK,
      card.DEF,
      card.HIT,
      card.AVO,
      card.LUK
    ]);
  });
}

https://jsfiddle.net/ja03o65r/30/

...