前端UI組件【免費(fèi)下載鏈接】DataTablesDataTables - legacy repo項(xiàng)目地址https://gitcode.com/gh_mirrors/da/DataTables點(diǎn)擊查看免費(fèi)下載導(dǎo)讀本文以本倉庫的 Readme.md 為骨架系統(tǒng)講解 DataTables——一個(gè)為 jQuery 設(shè)計(jì)的 HTML 表格增強(qiáng)插件——的定位、安裝方式與初始化用法。你將學(xué)會(huì)用一行 JavaScript 為任意 HTML 表格接入排序、分頁與搜索過濾能力并通過配置對象按需開啟或關(guān)閉功能同時(shí)結(jié)合 media/js/jquery.dataTables.js 的源碼實(shí)現(xiàn)理解dataTable()與DataTable()兩種初始化方式的底層差異、默認(rèn)選項(xiàng)的源碼出處以及倉庫內(nèi) examples 示例目錄的實(shí)戰(zhàn)參考價(jià)值。一、倉庫定位這是一個(gè) legacy 倉庫在深入使用之前需要先明確本倉庫的性質(zhì)。根據(jù) Readme.md 的說明本倉庫是 DataTables 的legacy 倉庫遺留版本倉庫主源碼倉庫另有其處本倉庫主要承載已構(gòu)建好的分發(fā)產(chǎn)物。從 package.json 可以確認(rèn)本倉庫當(dāng)前對應(yīng) DataTables1.10.21版本核心文件為 media/js/jquery.dataTables.js其文件頭標(biāo)注的版權(quán)信息為?2008-2020 SpryMedia Ltd。同時(shí)DataTables 官方還維護(hù)著一系列Dist-*分發(fā)倉庫用于向 NPM、NuGet 等包管理生態(tài)發(fā)布產(chǎn)物每個(gè)分發(fā)倉庫對應(yīng)一個(gè)核心 JavaScript 文件、一套樣式或一個(gè)擴(kuò)展。官方推薦通過 download builder 獲取所需文件包括 NPM、NuGet、CDN 與直接下載完整安裝細(xì)節(jié)見官方安裝手冊——本倉庫的 package.json、bower.json、composer.json 則展示了各生態(tài)下可用的分發(fā)形態(tài)。二、DataTables 是什么為 HTML 表格注入排序、分頁與過濾DataTables 是 jQuery 的一個(gè)表格增強(qiáng)插件它用極小的成本為普通 HTML 表格加入**排序sorting、分頁paging和過濾filtering**能力。其官方目標(biāo)被一句話概括為增強(qiáng) HTML 表格中數(shù)據(jù)的可訪問性To enhance the accessibility of data in HTML tables。為了實(shí)現(xiàn)這一目標(biāo)DataTables 在設(shè)計(jì)時(shí)明確面向兩類用戶開發(fā)者DataTables 提供了大量選項(xiàng)控制數(shù)據(jù)應(yīng)如何獲取、顯示和被操作同時(shí)提供一套完整的 API 用于訪問和操作表格。終端用戶使用 DataTables 界面的人可以直觀、快速地完成排序、過濾、分頁與滾動(dòng)等操作從表格信息中獲取最大價(jià)值。從源碼角度看這份目標(biāo)與能力描述在 media/js/jquery.dataTables.js 的類注釋中得到印證插件基于**漸進(jìn)增強(qiáng)progressive enhancement**原則為任意 HTML 表格附加高級交互控件見 composer.json 的描述字段。2.1 版本與依賴前提本倉庫版本 1.10.21見 package.json 的version字段。依賴方面jQuery1.7package.json 的dependenciesbower.json 要求1.7.0。例如 examples/basic_init/zero_configuration.html 中即使用 jQuery 3.5.1 配合 DataTables 演示。核心構(gòu)建產(chǎn)物media/js/jquery.dataTables.js與其壓縮版media/js/jquery.dataTables.min.js以及樣式文件media/css/jquery.dataTables.css與壓縮版package.json 的files字段列出了發(fā)布時(shí)隨包攜帶的文件清單。三、安裝 DataTables3.1 官方獲取途徑獲取 DataTables 的主要途徑是使用官方 download builder它允許開發(fā)者勾選所需的核心文件、擴(kuò)展與樣式主題然后生成自定義下載包或 CDN 引用。也可以直接通過DataTables CDN按需引用單個(gè)文件。以上兩種方式的具體步驟以官方安裝文檔為準(zhǔn)。3.2 通過 NPM、Bower 與 Composer 安裝如果偏好包管理器本倉庫對應(yīng)的分發(fā)包以datatables.net為名發(fā)布在 NPM 與 Bower 上。若要使用 Bootstrap、Foundation 等其他樣式庫的配套樣式只需在包名上添加對應(yīng)后綴即可。此外 composer.json 表明 PHP 生態(tài)下存在datatables/datatables包版本同樣為 1.10.21。從 bower.json 可以清楚看到包內(nèi)實(shí)際交付的內(nèi)容{ name: datatables, main: [ media/js/jquery.dataTables.js, media/css/jquery.dataTables.css, media/images/sort_asc.png, media/images/sort_asc_disabled.png, media/images/sort_both.png, media/images/sort_desc.png, media/images/sort_desc_disabled.png ], dependencies: { jquery: 1.7.0 }, license: MIT }可以看到一個(gè) DataTables 包除了核心 JS 與 CSS 外還內(nèi)置了排序狀態(tài)指示圖標(biāo)sort_asc.png、sort_desc.png、sort_both.png等位于 media/images/這些圖片會(huì)在列排序時(shí)自動(dòng)顯示在表頭。四、快速上手一行代碼初始化表格4.1 最簡初始化在最簡單的情況下DataTables 只需一行 JavaScript 即可完成初始化$(table).dataTable();其中 jQuery 選擇器用來取得要增強(qiáng)的目標(biāo)表格的引用。由于 DataTables默認(rèn)開啟大部分功能這行代碼執(zhí)行后表格立即獲得搜索searching、排序ordering和分頁paging能力。這一點(diǎn)可以從兩個(gè)層面得到驗(yàn)證示例層面examples/basic_init/zero_configuration.html 正是零配置演示——頁面在$(document).ready中僅執(zhí)行$(#example).DataTable();就為一張 50 余行的員工表注入了完整的搜索框、可點(diǎn)擊排序的表頭和分頁條。源碼層面media/js/jquery.dataTables.js 中DataTable.defaults的默認(rèn)選項(xiàng)詳見下文默認(rèn)選項(xiàng)小節(jié)將分頁、排序、搜索等特性全部置為開啟。4.2 通過配置對象定制行為如果需要讓 DataTables 執(zhí)行特定動(dòng)作可以在構(gòu)造器中傳入一個(gè)配置對象。Readme 給出了關(guān)閉分頁并開啟縱向滾動(dòng)的示例$(table).dataTable( { paginate: false, scrollY: 300 } );這段代碼將禁用分頁功能同時(shí)讓表格在縱向超出 300 像素時(shí)啟用滾動(dòng)。Readme 同時(shí)指出DataTables 全部可用選項(xiàng)的完整列表收錄于官方文檔。這里需要提醒配置項(xiàng)名稱同時(shí)兼容**駝峰式camelCase**與1.9 時(shí)代遺留的匈牙利命名法如bPaginate——源碼中_fnCamelToHungarian函數(shù)見 media/js/jquery.dataTables.js 約 2027 行處的調(diào)用負(fù)責(zé)將現(xiàn)代命名映射為內(nèi)部舊式名稱因此新舊兩種寫法都能被正確解析。4.3 兩種初始化方式的源碼級差異不少初學(xué)者會(huì)困惑dataTable()與DataTable()的區(qū)別。查看 media/js/jquery.dataTables.js 末尾的 jQuery 掛載代碼約 15168–15188 行即可解開疑問// jQuery access $.fn.dataTable DataTable; // Provide access to the host jQuery object (circular reference) DataTable.$ $; // Legacy aliases $.fn.dataTableSettings DataTable.settings; $.fn.dataTableExt DataTable.ext; // With a capital D we return a DataTables API instance rather than a // jQuery object $.fn.DataTable function ( opts ) { return $(this).dataTable( opts ).api(); }; // All properties that are available to $.fn.dataTable should also be // available on $.fn.DataTable $.each( DataTable, function ( prop, val ) { $.fn.DataTable[ prop ] val; } );關(guān)鍵結(jié)論$().dataTable(opts)返回經(jīng)過 jQuery 鏈?zhǔn)桨b的對象適合在 jQuery 調(diào)用鏈中繼續(xù)操作 DOM。$().DataTable(opts)內(nèi)部調(diào)用dataTable(opts).api()返回的是DataTables API 實(shí)例方便直接調(diào)用rows()、search()、order()等 API 方法進(jìn)行數(shù)據(jù)訪問與操作。源碼同時(shí)把DataTable.settings與DataTable.ext暴露為遺留別名$.fn.dataTableSettings與$.fn.dataTableExt供老版本插件和代碼繼續(xù)使用。另外media/js/jquery.dataTables.js 頂部采用 UMD 包裝約 23–55 行支持三種加載環(huán)境AMDdefine([jquery], factory)CommonJSmodule.exports function (root, $)可配合 Node 環(huán)境的require(jquery)瀏覽器全局直接調(diào)用factory(jQuery, window, document)。因此同一份文件既能通過script標(biāo)簽引入也能被 RequireJS、webpack 等模塊系統(tǒng)加載。五、默認(rèn)選項(xiàng)為什么零配置也能開箱即用DataTables 的默認(rèn)行為全部集中在 media/js/jquery.dataTables.js 約 9935 行起的DataTable.defaults對象中。以下是源碼中可查證的幾個(gè)關(guān)鍵默認(rèn)值注意源碼中保留的是內(nèi)部匈牙利命名即bPaginate等特性源碼默認(rèn)項(xiàng)默認(rèn)值說明分頁bPaginatetrue默認(rèn)啟用分頁約 10467 行每頁長度選擇器bLengthChangetrue默認(rèn)顯示每頁顯示條數(shù)下拉約 10449 行處理中指示器bProcessingfalse大數(shù)據(jù)量排序時(shí)的處理中提示默認(rèn)關(guān)閉約 10488 行也就是說之所以$(table).dataTable()一行即可工作是因?yàn)檫@些特性在DataTable.defaults中默認(rèn)開啟而當(dāng)你傳入{ paginate: false }這類配置時(shí)初始化流程會(huì)將用戶配置與DataTable.defaults合并源碼約 881 行var defaults DataTable.defaults;處的邏輯從而覆蓋默認(rèn)行為。六、倉庫內(nèi)可運(yùn)行的示例資源本倉庫 examples/ 目錄收錄了大量可直接在瀏覽器中打開運(yùn)行的 HTML 示例按主題組織為 8 大類是學(xué)習(xí) DataTables 的最佳配套教材examples/basic_init/基礎(chǔ)初始化——零配置、功能開關(guān)、排序、多列排序、多表、隱藏列、復(fù)雜表頭、DOM 定位、彈性寬度、狀態(tài)保存、數(shù)據(jù)渲染、滾動(dòng)等入口見 examples/basic_init/index.html。examples/advanced_init/高級初始化——DOM/jQuery 事件、DataTables 事件、列渲染、每頁條數(shù)、多控件、HTML5data-*屬性、默認(rèn)值設(shè)置、行分組、表尾回調(diào)等入口見 examples/advanced_init/index.html。examples/styling/樣式集成——基礎(chǔ)樣式、Bootstrap 3/4、Foundation、Semantic UI、jQuery UI ThemeRoller、Material Design 與 UIKit 3 預(yù)覽版入口見 examples/styling/index.html。examples/data_sources/數(shù)據(jù)來源——DOM 數(shù)據(jù)、Ajax 數(shù)據(jù)、JavaScript 數(shù)組、服務(wù)端處理入口見 examples/data_sources/index.html。examples/api/API 使用——增行、列過濾、行高亮、子行詳情、行選擇、表單輸入、索引列、動(dòng)態(tài)顯隱列、正則搜索等入口見 examples/api/index.html。examples/ajax/Ajax 數(shù)據(jù)源——數(shù)組、對象、嵌套對象、正交數(shù)據(jù)、延遲渲染等配套測試數(shù)據(jù)位于 examples/ajax/data/入口見 examples/ajax/index.html。examples/server_side/服務(wù)端處理——含 PHP 示例腳本 examples/server_side/scripts/server_processing.php、SSP 類 examples/server_side/scripts/ssp.class.php以及 MySQL、PostgreSQL、SQLite、SQL Server、Oracle、Firebird 等多種數(shù)據(jù)庫建表腳本見 examples/server_side/scripts/ 目錄此外還覆蓋自定義 HTTP 變量、POST 數(shù)據(jù)、JSONP、流水線分頁等高級主題入口見 examples/server_side/index.html。examples/plug-ins/插件機(jī)制——API 插件方法、排序插件含/不含類型檢測、范圍過濾、實(shí)時(shí) DOM 排序入口見 examples/plug-ins/index.html。每個(gè)示例頁面底部都附有完整的 JavaScript、HTML、CSS 代碼標(biāo)簽頁并直接引用 media/js/jquery.dataTables.js 與 media/css/jquery.dataTables.css適合直接復(fù)制改造。七、文檔、支持與許可證文檔DataTables 的完整選項(xiàng)、API 與插件接口文檔集中在官方站點(diǎn)官方站點(diǎn)還介紹了大量可用于進(jìn)一步增強(qiáng)和定制表格的擴(kuò)展與插件。支持官方支持渠道包括 DataTables 官方論壇與商業(yè)支持方案。許可證DataTables 以MIT 許可證發(fā)布允許自由使用、修改和分發(fā)前提是保留版權(quán)頭——具體而言是 media/js/jquery.dataTables.js 頂部以/*!開頭的那段注釋塊本倉庫同時(shí)提供 license.txt。倉庫自身的 package.json、bower.json 與 composer.json 中l(wèi)icense字段也均聲明為 MIT。八、總結(jié)本倉庫作為 DataTables 1.10.21 的分發(fā)型倉庫其 Readme.md 清晰回答了三個(gè)問題DataTables 是什么為 jQuery 表格加入排序、分頁、過濾的增強(qiáng)插件、如何安裝download builder、CDN、NPM/Bower 的datatables.net包、Composer 的datatables/datatables包、如何使用$(table).dataTable()一行初始化或傳入{ paginate: false, scrollY: 300 }這類配置對象定制行為。結(jié)合 media/js/jquery.dataTables.js 的源碼我們還能進(jìn)一步掌握dataTable()與DataTable()的返回類型差異、UMD 模塊加載方式以及DataTable.defaults中默認(rèn)開啟特性的確切出處而 examples/ 目錄的 8 大類可運(yùn)行示例則是從基礎(chǔ)到服務(wù)端處理全鏈路的最佳實(shí)戰(zhàn)參照。贊分享前端UI組件【免費(fèi)下載鏈接】DataTablesDataTables - legacy repo項(xiàng)目地址https://gitcode.com/gh_mirrors/da/DataTables點(diǎn)擊查看免費(fèi)下載相關(guān)推薦CANN/ops-nn負(fù)對數(shù)似然損失算子NllLoss 產(chǎn)品支持情況 |產(chǎn)品 | 是否支持 | |: |: :| | term Ascend 950PR/Ascend 950DT/term | √人工智能算子庫深度學(xué)習(xí)CANNAscend智能網(wǎng)絡(luò)資源嗅探下載工具快速上手完整指南跨平臺下載終極解決方案智能網(wǎng)絡(luò)資源嗅探下載工具快速上手完整指南跨平臺下載終極解決方案 在數(shù)字內(nèi)容爆炸的時(shí)代你是否經(jīng)常遇到想要保存的精彩視頻卻無法下載的困擾無論是微信視頻號的精彩桌面應(yīng)用網(wǎng)絡(luò)音視頻QRemeshify完整安裝指南快速上手Blender重網(wǎng)格插件QRemeshify完整安裝指南快速上手Blender重網(wǎng)格插件 QRemeshify是一款專為Blender設(shè)計(jì)的開源重網(wǎng)格插件能夠輸出高質(zhì)量的四邊形拓?fù)鋱D形學(xué)3D建模上一篇如何快速部署Stable Diffusion WebUI終極AI繪畫一鍵安裝指南下一篇STM32 OLED驅(qū)動(dòng)終極指南快速點(diǎn)亮SSD1306顯示屏的完整方案創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考