部落格
在 DataTables 部落格中，您會找到關於 DataTables 及其擴充套件的新聞、公告和教學。
最新文章
2024 年 9 月 20 日
使用 Editor 的地址自動完成功能
當使用 Editor 建構資料輸入表單時，開發人員可以透過多種方式讓終端使用者的生活更輕鬆 – 清潔、簡潔和清晰的表單是 Editor 的優勢之一，但您也可以使用查詢和自動完成功能讓終端使用者更容易輸入資料。您很可能在註冊服務或在網際網路上運送物品時遇到地址自動完成功能 – 本文將深入探討如何在 Editor 中實現此功能。
首先，讓我們直接跳到一個可運作的範例，讓您了解我們將建構什麼 – 以下是一個包含三個虛構地址的表格。它完全可編輯，就像使用 Editor 的一般 DataTable 一樣（在本例中為本機編輯 – 此範例沒有後端資料庫）。本部落格文章中感興趣的部分是，如果您建立新記錄或編輯現有記錄 – 第二個欄位不是資料欄位，而是一個輸入欄位，讓使用者開始輸入地址，然後將使用 優秀的 Geoapify API 進行查詢。系統會向終端使用者（在本例中是您！）呈現一系列選項，並隨著他們繼續輸入而細化，並讓他們點擊其中一個來自動完成表單中的欄位。
| 名稱 | 房屋 | 街道 | 城市 | 郡/縣 | 州 | 郵遞區號 | 國家/地區 | |
|---|---|---|---|---|---|---|---|---|
| Airi Satou | The Ivies | Glebe Close | 倫敦 | 倫敦 | NW11 9TU | 英國 | ||
| Hope Fuentes | 392 | 楓樹街 | 洛杉磯 | 加利福尼亞州 | 90017 | 美國 | ||
| Serge Baldwin | 28 | Chemin Du Lavarin Sud | 卡昂 | 下諾曼第 | 14000 | 法國 |
DataTables React 元件
這早就該做了 – 事實證明，React 不只是一時的流行 (誰知道！</sarcasm>)，因此，我懷著如釋重負的心情，以及一如既往地宣布新軟體的喜悅，透過這篇文章，我將介紹 DataTables 的 React 元件。
新的 DataTables React 元件基本上是現有 DataTables 函式庫的包裝，以一種熟悉 React 使用者的方式公開它，同時仍使 DataTables 的所有功能都可用。
這篇文章將討論如何安裝和使用新的元件，以便在您的 React 應用程式中獲得 DataTables 的好處和使用。還有許多範例（例如 這個簡單的用例）呈現，讓您可以即時試用該元件。
排序順序外掛程式
我最近收到一位開發人員提出的有趣問題，他想向終端使用者展示在多欄排序時應用於 DataTable 的排序順序的視覺表示。例如，如果排序中有兩欄，則了解 DataTables 使用哪一欄作為主要排序，以及哪一欄作為次要排序會很有用。
DataTable 的預設樣式確實包括對已排序欄中的儲存格進行陰影處理，但主要排序和次要排序之間的差異是刻意不明顯的。為了使其更加突出，我想出了一個主意，在排序指示器旁邊顯示一個數字標籤。在下面的範例中，第一欄和第二欄分別用於主要排序和次要排序，您可以在每欄的頂部看到數字
| 名稱 | 職位 | 辦公室 | 薪資 |
|---|---|---|---|
| Tiger Nixon | 系統架構師 | 愛丁堡 | $320,800 |
| Garrett Winters | 會計師 | 東京 | $170,750 |
| Ashton Cox | 初級技術作者 | 舊金山 | $86,000 |
| Cedric Kelly | 資深 Javascript 開發人員 | 愛丁堡 | $433,060 |
| Airi Satou | 會計師 | 東京 | $162,700 |
| Brielle Williamson | 整合專員 | 紐約 | $372,000 |
| Herrod Chandler | 銷售助理 | 舊金山 | $137,500 |
| Rhona Davidson | 整合專員 | 東京 | $327,900 |
| Colleen Hurst | Javascript 開發人員 | 舊金山 | $205,500 |
| Sonya Frost | 軟體工程師 | 愛丁堡 | $103,600 |
| Jena Gaines | 辦公室經理 | 倫敦 | $90,560 |
| Quinn Flynn | 支援主管 | 愛丁堡 | $342,000 |
| Charde Marshall | 區域主管 | 舊金山 | $470,600 |
| Haley Kennedy | 資深行銷設計師 | 倫敦 | $313,500 |
| Tatyana Fitzpatrick | 區域主管 | 倫敦 | $385,750 |
| Michael Silva | 行銷設計師 | 倫敦 | $198,500 |
| Paul Byrd | 財務長 (CFO) | 紐約 | $725,000 |
| Gloria Little | 系統管理員 | 紐約 | $237,500 |
| Bradley Greer | 軟體工程師 | 倫敦 | $132,000 |
| Dai Rios | 人事主管 | 愛丁堡 | $217,500 |
| Jenette Caldwell | 開發主管 | 紐約 | $345,000 |
| Yuri Berry | 行銷長 (CMO) | 紐約 | $675,000 |
| Caesar Vance | 售前支援 | 紐約 | $106,450 |
| Doris Wilder | 銷售助理 | 雪梨 | $85,600 |
| Angelica Ramos | 執行長 (CEO) | 倫敦 | $1,200,000 |
| Gavin Joyce | 開發人員 | 愛丁堡 | $92,575 |
| Jennifer Chang | 區域主管 | 新加坡 | $357,650 |
| Brenden Wagner | 軟體工程師 | 舊金山 | $206,850 |
| Fiona Green | 營運長 (COO) | 舊金山 | $850,000 |
| Shou Itou | 區域行銷 | 東京 | $163,000 |
| Michelle House | 整合專員 | 雪梨 | $95,400 |
| Suki Burks | 開發人員 | 倫敦 | $114,500 |
| Prescott Bartlett | 技術作者 | 倫敦 | $145,000 |
| Gavin Cortez | 團隊負責人 | 舊金山 | $235,500 |
| Martena Mccray | 售後支援 | 愛丁堡 | $324,050 |
| Unity Butler | 行銷設計師 | 舊金山 | $85,675 |
| Howard Hatfield | 辦公室經理 | 舊金山 | $164,500 |
| Hope Fuentes | 秘書 | 舊金山 | $109,850 |
| Vivian Harrell | 財務總監 | 舊金山 | $452,500 |
| Timothy Mooney | 辦公室經理 | 倫敦 | $136,200 |
| Jackson Bradshaw | 主管 | 紐約 | $645,750 |
| Olivia Liang | 支援工程師 | 新加坡 | $234,500 |
| Bruno Nash | 軟體工程師 | 倫敦 | $163,500 |
| Sakura Yamamoto | 支援工程師 | 東京 | $139,575 |
| Thor Walton | 開發人員 | 紐約 | $98,540 |
| Finn Camacho | 支援工程師 | 舊金山 | $87,500 |
| Serge Baldwin | 資料協調員 | 新加坡 | $138,575 |
| Zenaida Frank | 軟體工程師 | 紐約 | $125,250 |
| Zorita Serrano | 軟體工程師 | 舊金山 | $115,000 |
| Jennifer Acosta | 初級 Javascript 開發人員 | 愛丁堡 | $75,650 |
| Cara Stevens | 銷售助理 | 紐約 | $145,600 |
| Hermione Butler | 區域主管 | 倫敦 | $356,250 |
| Lael Greer | 系統管理員 | 倫敦 | $103,500 |
| Jonas Alexander | 開發人員 | 舊金山 | $86,500 |
| Shad Decker | 區域主管 | 愛丁堡 | $183,000 |
| Michael Bruce | Javascript 開發人員 | 新加坡 | $183,000 |
| Donna Snider | 客戶支援 | 紐約 | $112,000 |
在欄標題上使用Shift 鍵 + 點擊來觸發表格上的多欄排序，並注意指示器會變更。當排序僅應用於單欄時，不會顯示其他指示器。
歷史部落格文章
2024
- DataTables 2.1 2024 年 7 月 19 日
- 輸入分頁外掛程式 2024 年 5 月 28 日
- DataTables 2！ 2024 年 3 月 15 日
2023
- 實驗：匯入地圖 2023 年 3 月 7 日
- 外掛程式的載入器 2023 年 2 月 28 日
- Editor 2.1 2023 年 2 月 10 日
2022
- Vue3 元件 2022 年 6 月 22 日
- 有人使用 RequireJS 嗎？ 2022 年 6 月 20 日
- DataTables 1.12 2022 年 5 月 13 日
- DataTables 和 CloudTables 的社群媒體 2022 年 2 月 14 日
2021
- StateRestore 簡介 2021 年 11 月 26 日
- 模糊搜尋外掛程式 2021 年 9 月 17 日
- Editor 中的階層式清單 (第 2 部分！) 2021 年 7 月 8 日
- Bootstrap 5 和 Bulma 樣式 2021 年 6 月 10 日
- 類型偵測函式庫 2021 年 5 月 17 日
- 國際化貢獻 2021 年 4 月 9 日
- Editor 2 2021 年 3 月 9 日
- Bootstrapped Podcast 2021 年 1 月 29 日
2020
- Highcharts 整合 2020 年 10 月 1 日
- SearchBuilder 簡介 2020 年 9 月 15 日
- Editor QR 掃描器整合 2020 年 7 月 10 日
- CloudTables 簡介 2020 年 6 月 1 日
- 將 Editor 的函式庫用於伺服器端處理 2020 年 5 月 12 日
- SearchPanes 版本 2020 年 1 月 13 日
- RowGroup 技巧與訣竅 2020 年 1 月 5 日
2019
- 10 月版本 - 2019 年 2019 年 10 月 2 日
- DataTables 下載統計資料 - 2019 年 2019 年 7 月 29 日
- 捲動到頂端 2019 年 6 月 21 日
- 編輯前重新整理資料 2019 年 4 月 15 日
- 在 WordPress 中安裝 Editor 2019 年 2 月 15 日
- 子列中的父/子編輯 2019 年 1 月 11 日
2018
- 偵錯工具更新 2018 年 7 月 12 日
- SearchFade 2018 年 5 月 8 日
2017
- 垂直捲軸調整 2017 年 12 月 31 日
- 實驗：SearchPane 2017 年 11 月 30 日
- 在 Editor 中排隊變更 2017 年 10 月 24 日
- Editor 中的階層式清單 2017 年 9 月 1 日
- Editor 和 NPM 2017 年 8 月 31 日
- DataTables 的深層連結 2017 年 7 月 24 日
- 永遠可見的編輯面板 2017 年 6 月 30 日
- DataTables 中的迭代器 2017 年 5 月 31 日
- RowGroup - 新擴充套件 2017 年 4 月 7 日
- Ajax 載入的列詳細資料 2017 年 3 月 31 日
- 基於地區設定的排序 2017 年 2 月 28 日
- 使用 mark.js 進行搜尋醒目提示 2017 年 1 月 19 日
2016
- 使用絕對定位資料進行排序 2016 年 12 月 23 日
- Editor 1.6 2016 年 12 月 16 日
- 動態列舉排序 2016 年 6 月 16 日
- 2016 年春季更新 2016 年 5 月 24 日
- 使用 Editor 進行父/子編輯 2016 年 3 月 25 日
- 省略符號渲染器 2016年2月26日
- 產生器更新 2016年1月21日
2015
- 下載統計 2015年12月31日
- NPM 和 Bower 2015年11月9日
- 編輯器的伺服器端事件 2015年10月2日
- 多行批量編輯 2015年9月11日
- 更新大放送 2015年8月13日
- Git 儲存庫結構更新 2015年6月2日
- DataTables 1.10.7 2015年4月30日
- 垂直頁面調整 2015年4月10日
- Editor 1.4 / DataTables 1.10.5 2015年2月12日
2014
- 終極日期/時間排序外掛 2014年12月18日
- Editor 1.4 beta - .NET 2014年12月4日
- 表格標題 2014年11月7日
- 搜尋結果高亮 2014年10月22日
- DataTables 1.10.3 2014年10月9日
- 滑動子行 2014年10月2日
- 字母輸入搜尋 - 第三部分 2014年9月22日
- 永久內嵌核取方塊 2014年9月9日
- 字母輸入搜尋 - 第二部分 2014年9月2日
- 字母輸入搜尋 - 第一部分 2014年8月26日
- 商業：英國增值稅匯率 2014年8月8日
- Editor 中的重複按鈕 2014年7月25日
- 為 DataTables 推出響應式功能 2014年7月16日
- DataTables 1.10.1、Editor 1.3.2 以及更多 2014年7月15日
- Nominet 網路獎入圍名單 2014年6月17日
- Font Awesome 整合 2014年6月6日
- 支援與論壇更新 2014年5月26日
- DataTables 1.10.0 發佈 2014年5月1日
- DataTables 1.10.0 候選版本 2014年4月25日
- DataTables 1.10 beta 2014年2月4日
- HTML 5 剪貼簿和檔案 API 2014年1月31日
- JS Bin 更新 2014年1月24日
2012
- 正交數據 2012年7月9日
- 內嵌編輯 2012年5月31日
- 推出 Editor 2012年5月4日
- DataTables 除錯工具 2012年2月26日
- Twitter Bootstrap 2 2012年2月1日
- Microsoft CDN 2012年1月28日
- 使用 localStorage 儲存狀態 2012年1月16日
2011
- Twitter Bootstrap 2011年12月8日
- 網站更新 - JS Bin 和更多 2011年11月1日
- DataTables 入門 2011年8月27日
- DataTables 支援 2011年6月29日
- 向下鑽取列 2011年6月19日
- 推出 Scroller 2011年6月11日
- DataTables 1.8 2011年6月4日
- 使用 DataTables 建立美觀且功能齊全的表格 2011年5月10日
- DataTables 的擴充數據源選項 2011年5月1日