Resolved #329 - Tabulator - Server-Side (Remote) Pagination - support…

… promises and server-side filtering and sorting
surveyjs · May 16, 2024 · 42cf7f3 · 42cf7f3
1 parent 253c311
commit 42cf7f3
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 17 deletions.
diff --git a/examples/tabulator-remote.js b/examples/tabulator-remote.js
@@ -11,13 +11,26 @@ var normalizedData = data.map(function (item) {
 
 SurveyAnalyticsTabulator.Table.showFilesAsImages = true;
 
-function getPaginatedData({ offset, limit, callback }) {
-  // const url = "http://www.example.com/";
-  // const reqBody = { skip, take, pageSize };
-  // return fetch(url, { body: reqBody });
-  setTimeout(() => {
-    callback({ data: normalizedData.slice(offset, offset + limit), total: normalizedData.length });
-  }, 1000);
+// function getPaginatedData({ offset, limit, filter, sorting, callback }) {
+//   setTimeout(() => {
+//     callback({ data: normalizedData.slice(offset, offset + limit), total: normalizedData.length });
+//   }, 1000);
+// }
+
+// function getPaginatedData({ offset, limit, filter, sorting}) {
+//   const url = "http://www.example.com/";
+//   const reqBody = { skip, take, pageSize };
+//   return fetch(url, { body: reqBody });
+// }
+
+function getPaginatedData({ offset, limit, filter, sorting }) {
+  console.log(JSON.stringify(filter));
+  console.log(JSON.stringify(sorting));
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      resolve({ data: normalizedData.slice(offset, offset + limit), total: normalizedData.length });
+    }, 1000);
+  });
 }
 
 var surveyAnalyticsTabulator = new SurveyAnalyticsTabulator.Tabulator(

diff --git a/src/tables/table.ts b/src/tables/table.ts
@@ -33,7 +33,12 @@ export interface ITableOptions {
   }) => void;
 }
 
-export type GetPaginatedDataFunction = (params: { filter?: any, limit?: number, offset?: number, callback: (response: { data: Array<Object>, total: number, error?: any }) => void }) => void;
+export type TabulatorFilter = { field: string, type: string, value: any };
+export type TabulatorSorter = { field: string, dir: "" | "asc" | "desc" };
+export type GetPaginatedDataCallbackFunction = (params: { filter?: Array<TabulatorFilter>, sorting?: Array<TabulatorSorter>, limit?: number, offset?: number, callback?: (response: { data: Array<Object>, total: number, error?: any }) => void }) => void;
+export type GetPaginatedDataPromiseFunction = (params: { filter?: Array<TabulatorFilter>, sorting?: Array<TabulatorSorter>, limit?: number, offset?: number }) => Promise<{ data: Array<Object>, total: number, error?: any }>;
+export type GetPaginatedDataFunction = GetPaginatedDataCallbackFunction | GetPaginatedDataPromiseFunction;
+// export type GetPaginatedDataFunction = (params: { filter?: any, limit?: number, offset?: number, callback?: (response: { data: Array<Object>, total: number, error?: any }) => void }) => Promise<{ data: Array<Object>, total: number, error?: any }> | void;
 
 export class TableEvent extends EventBase<Table> {}
 

diff --git a/src/tables/tabulator.ts b/src/tables/tabulator.ts
@@ -154,20 +154,30 @@ export class Tabulator extends Table {
     if(data === undefined && typeof this.data === "function") {
       delete config.data;
       config.pagination = "remote";
+      config.ajaxFiltering = true; // Tabulator v4.8
+      config.filterMode = "remote"; // Tabulator v6.2
+      config.ajaxSorting = true; // Tabulator v4.8
+      config.sortMode = "remote"; // Tabulator v6.2
       config.ajaxURL = "function",
       config.ajaxRequestFunc = (url, config, params) => {
-        return new Promise((resolve, reject) => {
-          (this.data as GetPaginatedDataFunction)({
+        return new Promise<{ data: Array<Object>, last_page: number }>((resolve, reject) => {
+          const dataLoadingCallback = (loadedData: { data: Array<Object>, total: number, error?: any }) => {
+            if(!loadedData.error && Array.isArray(loadedData.data)) {
+              resolve({ data: loadedData.data.map(item => this.processLoadedDataItem(item)), last_page: Math.ceil(loadedData.total / params.size) });
+            } else {
+              reject();
+            }
+          };
+          const dataLoadingPromise = (this.data as GetPaginatedDataFunction)({
             offset: (params.page - 1) * params.size,
             limit: params.size,
-            callback: (loadedData: { data: Array<Object>, total: number, error?: any }) => {
-              if(!loadedData.error && Array.isArray(loadedData.data)) {
-                resolve({ data: loadedData.data.map(item => this.processLoadedDataItem(item)), last_page: Math.ceil(loadedData.total / params.size) });
-              } else {
-                reject();
-              }
-            },
+            filter: this.tabulatorTables?.getFilters(),
+            sorting: this.tabulatorTables?.getSorters().map(s => ({ field: s.field, dir: s.dir })),
+            callback: dataLoadingCallback
           });
+          if(dataLoadingPromise) {
+            dataLoadingPromise.then(dataLoadingCallback);
+          }
         });
       };
     }