Функции сортировки и поиска не работают вместе
У меня есть следующие функции поиска и сортировки в моем файле 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>
У меня работает поиск, чтобы отобразить записи в реальном времени для того, что я ищу, и сортировка работает при первоначальной загрузке, но если я ищу что-то и результаты появляются, сортировка не будет работать на этих результатах, я не могу понять, почему. Может ли кто-нибудь помочь мне с этим?