ตัวอย่างการทำ search / filters ของ Tabulator จริง ๆ แล้วมันแทบจะเหมือนตัวอย่าง Filtering Data ที่เค้าทำเอาไว้เลย มันทำงานได้ดี ได้ครบฟังก์ชั่นที่ระบบ search ในตารางมันควรจะมีอยู่แล้ว
แต่เอามาเปลี่ยน 2 อย่าง
- ย้าย code บางส่วนไป snippets/Tabulator/assets/Tabulator.helper.filter.js เหตุผลก็ง่าย ๆ list template ไหน ๆ ใน project เดียวกัน มันก็ใช้ search รูปแบบเดียวกัน และแกจะทำซ้ำเพื่อ DRY (don’t repeat yourself) นะ
- แก้ส่วน <select id=”filter-field”> โดยใส่ html encode ไปแทน < > เพราะว่าสั่ง format code เอาไว้ แล้วมันจัด code ใหม่ดูแล้วไม่สวยทุกที
บนตารางจะเพิ่มส่วนของ input ที่จะเอาไว้กรอก filters และโหลด code ที่แยกเอาไปใช้ซ้ำ
snippets/Tabulator/data.filters.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</title>
<!-- Tabulator CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/6.3.1/css/tabulator.min.css"
integrity="sha512-RYFH4FFdhD/FdA+OVEbFVqd5ifR+Dnx2M7eWcmkcMexlIoxNgm89ieeVyHYb8xChuYBtbrasMTlo02cLnidjtQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" rel="stylesheet" />
</head>
<body>
<div>
<select id="filter-field">
<option value="code">Code</option>
<option value="numeric">Numeric</option>
<option value="digits">Digits</option>
<option value="currency">Currency</option>
<option value="locations">Locations listed for this currency</option>
</select>
<select id="filter-type">
<option value="=">=</option>
<option value="<"><</option>
<option value="<="><=</option>
<option value=">">></option>
<option value=">=">>=</option>
<option value="!=">!=</option>
<option value="like">like</option>
</select>
<input id="filter-value" type="text" placeholder="value to filter">
<button id="filter-clear">Clear Filter</button>
</div>
<div id="tabulator-table"></div>
<!-- Tabulator JS -->
<script crossorigin="anonymous"
integrity="sha512-8+qwMD/110YLl5T2bPupMbPMXlARhei2mSxerb/0UWZuvcg4NjG7FdxzuuvDs2rBr/KCNqhyBDe8W3ykKB1dzA=="
referrerpolicy="no-referrer"
src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/6.3.1/js/tabulator.min.js"></script>
<!-- filter helper -->
<script src="assets/Tabulator.helper.filter.js"></script>
<script>
var table = new Tabulator("#tabulator-table", {
ajaxURL: "../assets/ISO-4217.json",
ajaxConfig: "GET",
selectable: true,
columns: [
{ field: "code", title: "Code", width: 80 },
{ field: "numeric", title: "Numeric", width: 80 },
{ field: "digits", title: "Digits", width: 80 },
{ field: "currency", title: "Currency" },
{ field: "locations", title: "Locations listed for this currency" }
],
layout: "fitColumns",
pagination: true,
paginationSize: 10
});
</script>
</body>
</html>
snippets/Tabulator/assets/Tabulator.helper.filter.js
//https://tabulator.info/docs/6.3/filter
//Define variables for input elements
var fieldEl = document.getElementById("filter-field");
var typeEl = document.getElementById("filter-type");
var valueEl = document.getElementById("filter-value");
//Custom filter example
function customFilter(data) {
return data.car && data.rating < 3;
}
//Trigger setFilter function with correct parameters
function updateFilter() {
var filterVal = fieldEl.options[fieldEl.selectedIndex].value;
var typeVal = typeEl.options[typeEl.selectedIndex].value;
// Decode the filter value
filterVal = decodeURIComponent(filterVal);
var filter = filterVal == "function" ? customFilter : filterVal;
if (filterVal == "function") {
typeEl.disabled = true;
valueEl.disabled = true;
} else {
typeEl.disabled = false;
valueEl.disabled = false;
}
if (filterVal) {
table.setFilter(filter, typeVal, valueEl.value);
}
}
//Update filters on value change
document.getElementById("filter-field").addEventListener("change", updateFilter);
document.getElementById("filter-type").addEventListener("change", updateFilter);
document.getElementById("filter-value").addEventListener("keyup", updateFilter);
//Clear filters on "Clear Filters" button click
document.getElementById("filter-clear").addEventListener("click", function () {
fieldEl.value = "";
typeEl.value = "=";
valueEl.value = "";
table.clearFilter();
});
ที่ต่างจากตัวอย่างของเค้าคือ บรรทัด filterVal = decodeURIComponent(filterVal); จุดเดียวจริง ๆ
อ่านเพิ่มเติม