ตัวอย่างการเขียน filters data (search) ใน Tabulator โดยจะเป็นการเสิร์ชหาข้อมูลโดยใช้ javascript ฟิลเตอร์ข้อมูลในฝั่ง client
Tabulator/data.filters.local.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabulator: data.filters.local</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/6.3.1/css/tabulator.min.css" rel="stylesheet" />
</head>
<body>
<fieldset>
<legend>Search</legend>
<label for="search-input-all">Search All:</label>
<input id="search-input-all" placeholder="Search..." type="text">
<hr>
<label for="search-input-code">Search Code:</label>
<input id="search-input-code" placeholder="Search Code..." type="text">
<label for="search-input-currency">Search Currency:</label>
<input id="search-input-currency" placeholder="Search Currency..." type="text">
<label for="search-input-location">Search Locations:</label>
<input id="search-input-location" placeholder="Search Locations..." type="text">
<label for="search-input-digits">Search Digits:</label>
<input id="search-input-digits" placeholder="Search Digits..." type="text">
<hr>
<button id="search-button" type="button">Search</button>
<button id="clear-search-button" type="button">Clear Search</button>
</fieldset>
<form id="formA" method="post">
<label>Date From: <input name="date_from" type="date"></label>
<label>Date To: <input name="date_to" type="date"></label>
<div id="tabulator-table"></div>
<button type="submit">Submit</button>
</form>
<button type="button" id="show-local-storage">View Local Storage</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/6.3.1/js/tabulator.min.js"></script>
<script src="../assets/javascript.form.helper.js"></script>
<script src="assets/Tabulator.helper.form.rowSelection.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const form = document.querySelector('#formA');
// Tabulator row selection name
const tableRowSelectName = 'items';
// tabulator table instance
const table = new Tabulator("#tabulator-table", {
ajaxURL: "../assets/ISO-4217.json",
ajaxConfig: "GET",
selectable: true,
columns: [
{
cellClick: (e, cell) => cell.getRow().toggleSelect(),
formatter: "rowSelection",
headerClick: (e, column) => {
const tableInstance = column.getTable();
const allRows = tableInstance.getRows();
const allSelected = allRows.every(row => row.isSelected());
if (allSelected) {
allRows.forEach(row => row.deselect());
} else {
allRows.forEach(row => row.select());
}
},
headerSort: false,
hozAlign: "center",
titleFormatter: "rowSelection",
width: 80
},
{ field: "code", title: "Code", width: 80 },
{ field: "currency", title: "Currency" },
{ field: "digits", title: "Digits", width: 80 },
{ field: "numeric", title: "Numeric", width: 80 },
{ field: "locations", title: "Locations" }
],
layout: "fitColumns",
pagination: true,
paginationMode: "local",
paginationSize: 10,
});
// tabulator event listeners for saving form data
table.on("cellEdited", () => {
TabulatorCacheDataToLocalStorage(form, table, tableRowSelectName);
});
table.on("pageLoaded", () => {
// When the page loads, we get the up-to-date selected data
TabulatorCacheDataToLocalStorage(form, table, tableRowSelectName);
});
table.on("rowAdded", () => {
TabulatorCacheDataToLocalStorage(form, table, tableRowSelectName);
});
table.on("rowSelectionChanged", () => {
TabulatorCacheDataToLocalStorage(form, table, tableRowSelectName);
});
// form event for input changes
form.addEventListener('input', () => {
TabulatorCacheDataToLocalStorage(form, table, tableRowSelectName);
});
// form event form submission
form.addEventListener('submit', event => {
event.preventDefault();
TabulatorCacheDataToLocalStorage(form, table, tableRowSelectName);
});
// Search logic
function doSearch() {
const filters = [];
const code = document.getElementById('search-input-code').value.trim();
const currency = document.getElementById('search-input-currency').value.trim();
const location = document.getElementById('search-input-location').value.trim();
const digits = document.getElementById('search-input-digits').value.trim();
const all = document.getElementById('search-input-all').value.trim();
if (code) filters.push({ field: 'code', type: 'like', value: code });
if (currency) filters.push({ field: 'currency', type: 'like', value: currency });
if (location) filters.push({ field: 'locations', type: 'like', value: location });
if (digits) filters.push({ field: 'digits', type: 'like', value: digits });
if (all) {
table.setFilter(function (data, filterParams) {
const val = all.toLowerCase();
return (
(data.code && data.code.toLowerCase().includes(val)) ||
(data.currency && data.currency.toLowerCase().includes(val)) ||
(data.digits && String(data.digits).toLowerCase().includes(val)) ||
(data.numeric && String(data.numeric).toLowerCase().includes(val)) ||
(data.locations && (Array.isArray(data.locations) ? data.locations.join(", ").toLowerCase().includes(val) : String(data.locations).toLowerCase().includes(val)))
);
});
} else {
table.setFilter(filters);
}
}
//filters search
document.getElementById('search-button').addEventListener('click', doSearch);
//filters reset
document.getElementById('clear-search-button').addEventListener('click', function () {
document.getElementById('search-input-all').value = '';
document.getElementById('search-input-code').value = '';
document.getElementById('search-input-currency').value = '';
document.getElementById('search-input-location').value = '';
document.getElementById('search-input-digits').value = '';
table.clearFilter();
});
// for debugging
document.getElementById('show-local-storage').addEventListener('click', () => {
const savedData = localStorage.getItem('forms');
if (savedData) {
alert('form_data\n' + savedData);
} else {
alert('No form_data found in localStorage');
}
});
});
</script>
</body>
</html>