Функции сортировки и поиска не работают вместе

У меня есть следующие функции поиска и сортировки в моем файле javascript и следующем html-файле

Файл JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const csrfToken     = document.getElementsByName('csrfmiddlewaretoken')[0]?.value;
  const resultsListFW = document.getElementById('list-results-fw');
  const listFW        = document.getElementById('list-fw');
  const searchInputFW = document.getElementById('search-input-fw');

  function renderFWData(data) {
    resultsListFW.innerHTML = ''; // Clear previous results

    let counter = 1;

    data.forEach(item => {
      const row = 
       `<tr>
          <td>${counter}</td>
          <td>${item.customer}</td>
          <td><a href="detail/${item.pk}" target="_blank">${item.name}</a></td>
        </tr>
        `;
      resultsListFW.insertAdjacentHTML('beforeend', row);
      counter++;
    });
    listFW.classList.add('not-visible');
    resultsListFW.classList.remove('not-visible');
  }

  function performFWSearch(query) {  // FW: Perform search
    fetch('/fw_search', {
        method: 'POST',
        headers: {
          'X-Requested-With' : 'XMLHttpRequest',
          'Content-Type'     : 'application/x-www-form-urlencoded',
          'X-CSRFToken'      : csrfToken
          },
        body: new URLSearchParams({
          fw: query
        })
      })
      .then(response => response.json())
      .then(data => {
        renderFWData(data.data);
      })
      .catch(error => {
        console.log('Error fetching FW data:', error);
      });
  }
});


document.addEventListener('DOMContentLoaded', () => {
  const table   = document.getElementById('fw-table');
  const headers = table.querySelectorAll('th[data-sort]');
  const tbody   = table.querySelector('tbody');

  headers.forEach(header => {
    header.addEventListener('click', () => {
      const sortKey = header.getAttribute('data-sort');
      const rows = Array.from(tbody.querySelectorAll('tr'));

      // Determine sorting order
      const order = header.dataset.order === 'asc' ? 'desc' : 'asc';
      header.dataset.order = order;

      // Sort rows
      rows.sort((a, b) => {
        const aText = a.querySelector(`td:nth-child(${header.cellIndex + 1})`).textContent.trim();
        const bText = b.querySelector(`td:nth-child(${header.cellIndex + 1})`).textContent.trim();

        if (!isNaN(aText) && !isNaN(bText)) {
          // Numeric comparison
          return order === 'asc' ? aText - bText : bText - aText;
        } else {
          // String comparison
          return order === 'asc' ? aText.localeCompare(bText) : bText.localeCompare(aText);
        }
      });

      // Append sorted rows to tbody
      rows.forEach(row => tbody.appendChild(row));
    });
  });
});

И следующий html-файл

<div class="card">
  <div class="card-header">
    <div class="card-tools">
      <!-- Search Form -->
      <form id="search-form-fw" method="get" action="" autocomplete="off">
        {% csrf_token %}
        <input type="text" id="search-input-fw" name="search" placeholder="Search">
        <button type="submit" class="btn btn-primary btn-sm">Search</button>
      </form>
    </div>
    <button type="button" class="btn btn-tool mt-0" data-card-widget="collapse" title="Collapse">
            <i class="fas fa-minus"></i>
        </button>
  </div>
  <div id="fw-wrapper" class="dataTables_wrapper dt-bootstrap4">
    <div class="row">
      <div class="col-sm-12 col-md-6"></div>
      <div class="col-sm-12 col-md-6"></div>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <table class="table table-bordered table-hover dataTable dtr-inline" id="fw-table">
          <thead style="text-align: center; position: sticky; top:0; background-color: white;">
            <tr>
              <th>Number #</th>
              <th data-sort="customer" class="sortable">Customer</th>
              <th data-sort="name" class="sortable">Device Name</th>
            </tr>
          </thead>
          <tbody id="list-fw">
            {% for device in list_of_deeds %}
            <tr>
              <td>{{ forloop.counter }}</td>
              <td>{{ device.customer }}</td>
              <td>
                <a href="/detail/{{ device.id }}" target="_blank">{{ device.name }}</a>
              </td>
            </tr>
            {% endfor %}
          </tbody>
          <tbody id="list-results-fw" class="not-visible"></tbody>
        </table>
      </div>
    </div>
  </div>
</div>

У меня работает поиск, чтобы отобразить записи в реальном времени для того, что я ищу, и сортировка работает при первоначальной загрузке, но если я ищу что-то и результаты появляются, сортировка не будет работать на этих результатах, я не могу понять, почему. Может ли кто-нибудь помочь мне с этим?

Вернуться на верх