Как можно сделать фильтрацию таблицы на JavaScript и Svelte быстро и легко.
Имеем такие данные:
Данные на svelte получаются с бэка таким образом:
let deposits = [];
let depositsBackup = [];
onMount(async () => {
getFetch('deposit/get-deposits/').then((r) => {
deposits = r;
depositsBackup = r;
});
});
let depositsBackup = [];
onMount(async () => {
getFetch('deposit/get-deposits/').then((r) => {
deposits = r;
depositsBackup = r;
});
});
Про асинхронную загрузку данных на Svelte.
Создаем 2 ссылки. Одна будет показывать в таблице записи, где есть описание. Другая будет показывать снова все записи.
<div class="links" on:click={displayOnlyWithNotes}>Показать только с записями</div>
<div class="links" on:click={displayAllNotes}>Показать все</div>
<div class="links" on:click={displayAllNotes}>Показать все</div>
И 2 метода к ним:
function displayOnlyWithNotes() {
deposits = deposits.filter(el => el.description !== '');
}
function displayAllNotes() {
deposits = depositsBackup;
}
deposits = deposits.filter(el => el.description !== '');
}
function displayAllNotes() {
deposits = depositsBackup;
}
Вот так просто можно реализовать фильтрацию данных в таблице на Svelte и её перестроение в реальном времени.
