2021 年 11 月 26 日星期五
作者:Sandy Galloway

StateRestore 介紹

StateRestore 是 DataTables 的一個新擴充功能,它以 stateSave 初始化選項為基礎,允許使用者儲存多個狀態,並在稍後還原。當然,有幾個初始化選項允許使用者自訂擴充功能的行為,以符合他們的個別需求。這些狀態可以儲存在會話儲存空間中,或透過 ajax 發送並儲存在伺服器上。

您可以在下方看到一個範例 - 按一下「建立狀態」按鈕以儲存第一個狀態

姓名職位辦公室年齡開始日期薪資
Tiger Nixon系統架構師愛丁堡612011-04-25$320,800
Garrett Winters會計師東京632011-07-25$170,750
Ashton Cox初級技術作家舊金山662009-01-12$86,000
Cedric Kelly資深 Javascript 開發人員愛丁堡222012-03-29$433,060
Airi Satou會計師東京332008-11-28$162,700
Brielle Williamson整合專家紐約612012-12-02$372,000
Herrod Chandler銷售助理舊金山592012-08-06$137,500
Rhona Davidson整合專家東京552010-10-14$327,900
Colleen HurstJavascript 開發人員舊金山392009-09-15$205,500
Sonya Frost軟體工程師愛丁堡232008-12-13$103,600
Jena Gaines辦公室經理倫敦302008-12-19$90,560
Quinn Flynn支援主管愛丁堡222013-03-03$342,000
Charde Marshall區域總監舊金山362008-10-16$470,600
Haley Kennedy資深行銷設計師倫敦432012-12-18$313,500
Tatyana Fitzpatrick區域總監倫敦192010-03-17$385,750
Michael Silva行銷設計師倫敦662012-11-27$198,500
Paul Byrd財務長 (CFO)紐約642010-06-09$725,000
Gloria Little系統管理員紐約592009-04-10$237,500
Bradley Greer軟體工程師倫敦412012-10-13$132,000
Dai Rios人事主管愛丁堡352012-09-26$217,500
Jenette Caldwell開發主管紐約302011-09-03$345,000
Yuri Berry行銷長 (CMO)紐約402009-06-25$675,000
Caesar Vance售前支援紐約212011-12-12$106,450
Doris Wilder銷售助理雪梨232010-09-20$85,600
Angelica Ramos執行長 (CEO)倫敦472009-10-09$1,200,000
Gavin Joyce開發人員愛丁堡422010-12-22$92,575
Jennifer Chang區域總監新加坡282010-11-14$357,650
Brenden Wagner軟體工程師舊金山282011-06-07$206,850
Fiona Green營運長 (COO)舊金山482010-03-11$850,000
Shou Itou區域行銷東京202011-08-14$163,000
Michelle House整合專家雪梨372011-06-02$95,400
Suki Burks開發人員倫敦532009-10-22$114,500
Prescott Bartlett技術作家倫敦272011-05-07$145,000
Gavin Cortez團隊負責人舊金山222008-10-26$235,500
Martena Mccray售後支援愛丁堡462011-03-09$324,050
Unity Butler行銷設計師舊金山472009-12-09$85,675
Howard Hatfield辦公室經理舊金山512008-12-16$164,500
Hope Fuentes秘書舊金山412010-02-12$109,850
Vivian Harrell財務總監舊金山622009-02-14$452,500
Timothy Mooney辦公室經理倫敦372008-12-11$136,200
Jackson Bradshaw總監紐約652008-09-26$645,750
Olivia Liang支援工程師新加坡642011-02-03$234,500
Bruno Nash軟體工程師倫敦382011-05-03$163,500
Sakura Yamamoto支援工程師東京372009-08-19$139,575
Thor Walton開發人員紐約612013-08-11$98,540
Finn Camacho支援工程師舊金山472009-07-07$87,500
Serge Baldwin資料協調員新加坡642012-04-09$138,575
Zenaida Frank軟體工程師紐約632010-01-04$125,250
Zorita Serrano軟體工程師舊金山562012-06-01$115,000
Jennifer Acosta初級 Javascript 開發人員愛丁堡432013-02-01$75,650
Cara Stevens銷售助理紐約462011-12-06$145,600
Hermione Butler區域總監倫敦472011-03-21$356,250
Lael Greer系統管理員倫敦212009-02-27$103,500
Jonas Alexander開發人員舊金山302010-07-14$86,500
Shad Decker區域總監愛丁堡512008-11-13$183,000
Michael BruceJavascript 開發人員新加坡292011-06-27$183,000
Donna Snider客戶支援紐約272011-01-25$112,000
姓名職位辦公室年齡開始日期薪資

下載

StateRestore 擴充功能可透過 DataTables CDN 使用 我們的下載建置器 和直接從我們的 CDN 存取(連結如下)。如果您偏好使用套件管理員,您也可以從 NPMNuGET 安裝。

CSS
JS

功能

StateRestore 使用兩個主要按鈕。第一個 createState 用於建立新的狀態。當按下此按鈕時,將會建立一個新的狀態,該狀態將反映表格的目前狀態。然後,可以透過按下 savedSates 按鈕來存取此狀態。這將顯示一個集合,其中為每個已儲存的狀態提供一個分割的 stateRestore 按鈕。

分割按鈕的主要動作會將其各自的狀態重新載入到 DataTable 中。觸發下拉式選單將會顯示狀態的名稱,以及其他三個次要動作按鈕。第一個 saveState,將會以表格的目前狀態覆寫該按鈕所代表的狀態。第二個按鈕 deleteState,將會從儲存空間刪除該狀態。第三個按鈕 renameState,將會根據使用者在顯示的模式中輸入的值來重新命名狀態。

用法

除了核心功能集之外,StateRestore 還有一些組態選項。更基本的選項包括停用新狀態的建立、現有狀態的儲存、狀態的重新命名以及狀態的刪除。也可以為首次載入表格的使用者預先定義狀態。

一個重要的附加功能是建立模式。當使用者按下 createState 按鈕時,會向使用者顯示一個模式。這將始終允許他們設定狀態的名稱,但也可以啟用切換 DataTables 中哪些元素儲存在該狀態中。例如,您可能只想儲存 SearchBuilder 狀態,而不儲存欄順序。stateRestore.toggle 允許這樣做。請在下面的範例中查看此行為。

姓名職位辦公室年齡開始日期薪資
Tiger Nixon系統架構師愛丁堡612011-04-25$320,800
Garrett Winters會計師東京632011-07-25$170,750
Ashton Cox初級技術作家舊金山662009-01-12$86,000
Cedric Kelly資深 Javascript 開發人員愛丁堡222012-03-29$433,060
Airi Satou會計師東京332008-11-28$162,700
Brielle Williamson整合專家紐約612012-12-02$372,000
Herrod Chandler銷售助理舊金山592012-08-06$137,500
Rhona Davidson整合專家東京552010-10-14$327,900
Colleen HurstJavascript 開發人員舊金山392009-09-15$205,500
Sonya Frost軟體工程師愛丁堡232008-12-13$103,600
Jena Gaines辦公室經理倫敦302008-12-19$90,560
Quinn Flynn支援主管愛丁堡222013-03-03$342,000
Charde Marshall區域總監舊金山362008-10-16$470,600
Haley Kennedy資深行銷設計師倫敦432012-12-18$313,500
Tatyana Fitzpatrick區域總監倫敦192010-03-17$385,750
Michael Silva行銷設計師倫敦662012-11-27$198,500
Paul Byrd財務長 (CFO)紐約642010-06-09$725,000
Gloria Little系統管理員紐約592009-04-10$237,500
Bradley Greer軟體工程師倫敦412012-10-13$132,000
Dai Rios人事主管愛丁堡352012-09-26$217,500
Jenette Caldwell開發主管紐約302011-09-03$345,000
Yuri Berry行銷長 (CMO)紐約402009-06-25$675,000
Caesar Vance售前支援紐約212011-12-12$106,450
Doris Wilder銷售助理雪梨232010-09-20$85,600
Angelica Ramos執行長 (CEO)倫敦472009-10-09$1,200,000
Gavin Joyce開發人員愛丁堡422010-12-22$92,575
Jennifer Chang區域總監新加坡282010-11-14$357,650
Brenden Wagner軟體工程師舊金山282011-06-07$206,850
Fiona Green營運長 (COO)舊金山482010-03-11$850,000
Shou Itou區域行銷東京202011-08-14$163,000
Michelle House整合專家雪梨372011-06-02$95,400
Suki Burks開發人員倫敦532009-10-22$114,500
Prescott Bartlett技術作家倫敦272011-05-07$145,000
Gavin Cortez團隊負責人舊金山222008-10-26$235,500
Martena Mccray售後支援愛丁堡462011-03-09$324,050
Unity Butler行銷設計師舊金山472009-12-09$85,675
Howard Hatfield辦公室經理舊金山512008-12-16$164,500
Hope Fuentes秘書舊金山412010-02-12$109,850
Vivian Harrell財務總監舊金山622009-02-14$452,500
Timothy Mooney辦公室經理倫敦372008-12-11$136,200
Jackson Bradshaw總監紐約652008-09-26$645,750
Olivia Liang支援工程師新加坡642011-02-03$234,500
Bruno Nash軟體工程師倫敦382011-05-03$163,500
Sakura Yamamoto支援工程師東京372009-08-19$139,575
Thor Walton開發人員紐約612013-08-11$98,540
Finn Camacho支援工程師舊金山472009-07-07$87,500
Serge Baldwin資料協調員新加坡642012-04-09$138,575
Zenaida Frank軟體工程師紐約632010-01-04$125,250
Zorita Serrano軟體工程師舊金山562012-06-01$115,000
Jennifer Acosta初級 Javascript 開發人員愛丁堡432013-02-01$75,650
Cara Stevens銷售助理紐約462011-12-06$145,600
Hermione Butler區域總監倫敦472011-03-21$356,250
Lael Greer系統管理員倫敦212009-02-27$103,500
Jonas Alexander開發人員舊金山302010-07-14$86,500
Shad Decker區域總監愛丁堡512008-11-13$183,000
Michael BruceJavascript 開發人員新加坡292011-06-27$183,000
Donna Snider客戶支援紐約272011-01-25$112,000
姓名職位辦公室年齡開始日期薪資

完整的組態選項清單可以在文件中找到。

版面配置

StateRestore 使用 Buttons 擴充功能初始化並插入到頁面中。請參閱Buttons 文件,瞭解如何在您的頁面中最佳地包含它們。您可以在這裡找到所有 StateRestore 按鈕的文件。

意見回饋

在發佈時,StateRestore 與 ColReorder、KeyTable 或 SearchPanes 不相容。對於 ColReorder 和 SearchPanes,我們將在未來進行修正,但這需要大幅重寫程式碼。這方面的工作已經開始,我們希望能在不久的將來發佈一個具有更高相容性的版本。

雖然這只是一個 1.0.0 版本,但在過去幾個月中已經進行了大量的工作和測試,以確保 StateRestore 是一個強大的擴充功能,可以使用在生產環境中。

我希望 StateRestore 可以增強您的專案,並且一如既往地歡迎您在論壇中對此 StateRestore 的初始版本提供意見回饋,以及您認為將來可以使擴充功能受益的其他任何功能!