jQuery: TabulatorPlus

$ (document) .ready (function () { // 1. กำหนดตัวแปรสำหรับเก็บ Instance (Reused Instance) let tableInstance = null; const $tableEl = $ ("#my-table") ; // --- FUNCTION: INITIALIZE (การสร้างครั้งแรก) --- function initTable (initialData) { // ตรวจสอบเพื่อไม่ให้สร้างซ้อน (Idempotent) if (tableInstance) return; tableInstance = new TabulatorPlus ($tableEl[0], { data: initialData, columns: [ { title: "ID", field: "id", width: 50 }, { title: "Product", field: "product", width: 200 }, { title: "Price", field: "price", formatter: "money" }, ], }, "jquery-storage-key") ; // หรือจะเก็บไว้ใน jQuery Data เพื่อเรียกใช้จากที่อื่นก็ได้ $tableEl.data ("tabulator-instance", tableInstance) ; } // --- FUNCTION: REFRESH (อัปเดตข้อมูล) --- window.refreshTableData = function (newData) { if (tableInstance) { console.log ("Refreshing data...") ; // ใช้ .setData () เพื่ออัปเดตข้อมูลโดยไม่ต้องวาดตารางใหม่ทั้งหมด tableInstance.setData (newData) ; } }; // --- FUNCTION: ACTION (เรียกใช้ Method) --- $ ("#btn-clear-filter") .on ("click", function () { if (tableInstance) { tableInstance.clearFilter (true) ; } }) ; // --- FUNCTION: UNMOUNT / DESTROY (การล้างข้อมูล) --- window.destroyTable = function () { if (tableInstance) { console.log ("Destroying table...") ; // ล้าง Event และ DOM ที่ Tabulator สร้างขึ้น tableInstance.destroy () ; tableInstance = null; $tableEl.removeData ("tabulator-instance") ; } }; // ทดลองรัน initTable ([ { id: 1, product: "Laptop", price: 35000 }, { id: 2, product: "Mouse", price: 1200 } ]) ;
}) ;