Tag Archive เสิร์ช

Byphunsanit

Tabulator: data.filters

ตัวอย่างการทำ 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); จุดเดียวจริง ๆ

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