PlusMagi's Blog By Pitt Phunsanit JavaScript,Tabulator Tabulator: data.filters

Tabulator: data.filters

2019-02-232019-02-23| phunsanitphunsanit| 0 Comment | 07:00
Categories:

ตัวอย่างการทำ search / filters ของ Tabulator จริง ๆ แล้วมันแทบจะเหมือนตัวอย่าง Filtering Data ที่เค้าทำเอาไว้เลย มันทำงานได้ดี ได้ครบฟังก์ชั่นที่ระบบ search ในตารางมันควรจะมีอยู่แล้ว

แต่เอามาเปลี่ยน 2 อย่าง

  1. ย้าย code บางส่วนไป snippets/Tabulator/assets/Tabulator.helper.filter.js เหตุผลก็ง่าย ๆ list template ไหน ๆ ใน project เดียวกัน มันก็ใช้ search รูปแบบเดียวกัน และแกจะทำซ้ำเพื่อ DRY ( don’t repeat yourself ) นะ
  2. แก้ส่วน <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="<">&lt;</option>
   <option value="<=">&lt;=</option>
   <option value=">">&gt;</option>
   <option value=">=">&gt;=</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); จุดเดียวจริง ๆ

อ่านเพิ่มเติม

ป้ายกำกับ:, , , ,