Как правильно прописать условия для фильтра?
Имеется фильтр.
Фильтр фильтрует по полю fio. Всё работает.
Логика:
- пользователь вводит критерии для фильтра в <input id="fio">;
- критерии попадают в JS;
- из БД получают данные;
- строится таблица HTML.
Как настроить фильтр для условий:
- в БД нет данных согласно критериев. Результат: получаем сообщение на странице - "Нет результатов";
- Пользователь очистил <input id="fio">. Результат: отображается вся таблица.
Я пробую это сделать, но ничего не происходит.
// Фильтр --- --- --- --- --- --- --- --- --- ---
$('#fio').on('input', function () {
var criteria = fio.value;
// event.preventDefault();
$.ajax({
url: "http://localhost:2000/players/getByFio",
method: "POST",
data: { criteria: criteria },
dataType: "JSON",
success: function (data) {
var html = '';
var dataState = data.length;
if (data.length > 0) {
buildRecords(data);
} // if (data.length > 0) {
else if (data.length = 0) {
var html = '';
} // if (data.length = 0) {
else if (criteria.length = 0) {
loadAllData();
} // if (data.length = 1) {
} // success: function (data) {
});
});
Обновление-1
players.controller.js
exports.getByFio = (req, res) => {
var criteria = req.body.criteria;
let query = "SELECT * FROM `players` WHERE fio LIKE '%" + criteria + "%'";
// execute query
db.query(query, (err, result) => {
if (err) {
res.redirect('/');
}
res.json(result);
});
};
index.ejs
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> <script>
$(document).ready(function () {
load_data();
// Загрузка-2
function load_data() {
$.ajax({
url: "http://localhost:2000/players/getAll",
method: "POST",
data: { action: 'fetch' },
dataType: "JSON",
success: function (data) {
buildRecords(data);
}
});
}
// Фильтр --- --- --- --- --- --- --- --- --- ---
$('#fio').on('input', function () {
var criteria = fio.value;
// event.preventDefault();
$.ajax({
url: "http://localhost:2000/players/getByFio",
method: "POST",
data: { criteria: criteria },
dataType: "JSON",
success: function (data) {
var html = '';
// let dataState = data.length;
var dataState = data.length;
if (data.length > 0) {
buildRecords(data);
} // if (data.length > 0) {
else if (data.length = 0) {
var html = '';
} // if (data.length = 0) {
else if (criteria.length = 0) {
load_data();
} // if (data.length = 1) {
} // success: function (data) {
});
});
// Построитель таблицы
function buildRecords(data) {
var html = '';
if (data.length > 0) {
for (var count = 0; count < data.length; count++) {
html += `
<tr>
<th scope="row">`
+ data[count].id +
`</th>
<td>
<img src="/assets/img/` + data[count].image + `"
class="rounded-circle player-img" alt="">
</td>
<td>`
+ data[count].first_name +
`</td>
<td>`
+ data[count].last_name +
`</td>
<td>
<a id="prisoner" data-id="` + data[count].id + `" href="#"> ` + data[count].fio + `</a>
</td>
<td>`
+ data[count].position +
`</td>
<td>`
+ data[count].resume +
`</td>
<td>`
+ data[count].number +
`</td>
<td>`
+ data[count].user_name +
`</td>
<td>
<a href="player/edit/` + data[count].id +
`" target="_blank" rel="noopener" class="btn btn-sm btn-success"> Edit </a>
<a href="player/delete/` + data[count].id +
`" class="btn btn-sm btn-danger"> Delete </a>
</td>
</tr>
`;
}
}
$('#sample_data tbody').html(html);
}
Ответы (1 шт):
Автор решения: Михаил В
→ Ссылка
Недостаточно информации
- Что и в каком виде возвращает АПИ getByFio в случае, когда criteria пустой и когда туда что-то передано
- Что такое buildRecords
- Что такое loadAllData
Но в любом случае, если Вы используете серверную фильтрацию посредством запроса, то всю логику фильтрации следует строить на сервере, а на клиент оставлять только вывод данных
Я бы предложил такую реализацию
- лучше не кидать запрос на сиюминутное изменение в инпуте, а делать запрос с некоторой задержкой. Это называется debounce, по сути работа с таймером для задержки действий на ввод пользователя. Как реализовать ищите в гугле или на SOF
- например мы выставили debounce на 500мс. Пользователь вводит что-то в input, через 500мс срабатывает запрос на сервер на getByFio, куда в качестве criteria передается, что ввел пользователь. Причем это же может быть и пустая строка, если пользователь все удалил. Сервер возвращает некий массив данных в зависимости от встроенной логики
- рендерим таблицу на основе данных, пришедших с сервера (тут уже будут не нужны все те условия, которые Вы понаписали)
- Profit
Обратите внимание, единичное "=" это присваивание. В условиях IF в JS используйте "==" или еще лучше "===".
Upd: решение:
#players.controller.js
exports.getByFio = (req, res) => {
var criteria = req.body.criteria;
let query = "SELECT * FROM 'players'";
if(criteria){
query += " WHERE fio LIKE '%" + criteria + "%'";
}
db.query(query, (err, result) => {
if (err) {
res.redirect('/');
}
res.json(result);
});
};
#index.ejs
$(document).ready(function () {
load_data();
function load_data() {
$.ajax({
url: "http://localhost:2000/players/getByFio",
method: "POST",
data: { criteria: criteria },
dataType: "JSON",
success: function (data) {
buildRecords(data);
}
});
}
$('#fio').on('input', function () {
const criteria = $(this).value;
load_data(criteria);
});
function buildRecords(data) {
let html = '';
if (data.length > 0) {
for (let count = 0; count < data.length; count++) {
html += '<tr>
<th scope="row">'
+ data[count].id +
'</th>
<td>
<img src="/assets/img/' + data[count].image + '"
class="rounded-circle player-img" alt="">
</td>
<td>'
+ data[count].first_name +
'</td>
<td>'
+ data[count].last_name +
'</td>
<td>
<a id="prisoner" data-id="' + data[count].id + '" href="#"> '
+ data[count].fio +
'</a>
</td>
<td>'
+ data[count].position +
'</td>
<td>'
+ data[count].resume +
'</td>
<td>'
+ data[count].number +
'</td>
<td>'
+ data[count].user_name +
'</td>
<td>
<a href="player/edit/'
+ data[count].id +
'" target="_blank" rel="noopener" class="btn btn-sm btn-success"> Edit</a>
<a href="player/delete/'
+ data[count].id +
'" class="btn btn-sm btn-danger"> Delete </a>
</td>
</tr>';
}
}
$('#sample_data tbody').html(html);
}
}
Вариант с debounce
Работоспособность нужно проверять, но логика в целом такая
// https://frontend-stuff.com/blog/debounce-in-javascript/
function debounce(func, wait, immediate) {
let timeout;
return function executedFunction() {
const context = this;
const args = arguments;
const later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
const callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
$(document).ready(function () {
load_data();
function load_data() {
$.ajax({
url: "http://localhost:2000/players/getByFio",
method: "POST",
data: { criteria: criteria },
dataType: "JSON",
success: function (data) {
buildRecords(data);
}
});
}
const searchDebounce = debounce(function(criteria) {
load_data(criteria);
}, 500);
$('#fio').on('input', function () {
const criteria = $(this).value;
searchDebounce(criteria);
});
function buildRecords(data) {
let html = '';
// ....тут рендер HTML аналогично первому варианту
$('#sample_data tbody').html(html);
}
}