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