ตัวอย่างการทำ search / filters ของ Tabulator จริง ๆ แล้วมันแทบจะเหมือนตัวอย่าง Filtering Data ที่เค้าทำเอาไว้เลย มันทำงานได้ดี ได้ครบฟังก์ชั่นที่ระบบ search ในตารางมันควรจะมีอยู่แล้ว
แต่เอามาเปลี่ยน 2 อย่าง
- ย้าย code บางส่วนไป snippets/Tabulator/assets/Tabulator.helper.filter.js เหตุผลก็ง่าย ๆ list template ไหน ๆ ใน project เดียวกัน มันก็ใช้ search รูปแบบเดียวกัน และแกจะทำซ้ำเพื่อ DRY นะ
- แก้ส่วน <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) ; จุดเดียวจริง ๆ
อ่านเพิ่มเติม