Datatables是一款jquery表格外掛程式。它是一個高度靈活的工具,可以將任何HTML表格添加進階的互動功能。
主要功能
分頁,立即搜尋和排序
幾乎支援任何資料來源:DOM, javascript, Ajax 和 伺服器處理
支援不同主題 DataTables, jQuery UI, Bootstrap, Foundation
各式各樣的擴充: Editor, TableTools, FixedColumns ……
豐富多樣的option和強大的API
支援國際化
超過2900+個單元測試
免費開源 ( MIT license )! 商業支援
更多特性請到官網查看
這裡主要講一下DataTable使用Ajax來擷取資料並且動態載入dom的方法。這樣也方便了資料管理,也避免了HTML頁面中大量的tr,看起來很淩亂。
顯示效果
源檔案
首先需要引入dataTables的源檔案:
CSS:http://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css
JS: http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js
使用
HTML
只需要定義一個table,給一個唯一的標誌(id或者唯一的class);
<table class="table table-bordered table-striped" id="dailyTable"></table>
JS
在頁面元素渲染完成之後,擷取table,使用dataTables對其操作。
ajax是資料的url,這裡用的本機資料,使用的是相對路徑。當然,也可以使用HTTP請求
columns是一個數組,定義的是表格的標題,數組有多少個介面就會顯示多少。格式必須是{title:“xxx”}
$(document).ready(function($) {$('#dailyTable').DataTable({ajax: "../json/tableData.json",columns: [{title: "Rendering engine"}, {title: "Browser"}, {title: "Platform(s)"}, {title: "Engine version"}, {title: "CSS grade"}]});});
JSON
這裡資料太多,只說明一下格式。
json資料格式為二維數組,其資料需要被包裹在"data"欄位下面。每個二維數組的資料按照js中的title順序依次排列。
{"data": [["Tiger Nixon","System Architect","Edinburgh","5421","2011/04/25","$320,800"],["Garrett Winters","Accountant","Tokyo","8422","2011/07/25","$170,750"]]}
以上所述是小編給大家介紹的DataTables+BootStrap組合使用Ajax來擷取資料並且動態載入dom的方法(排序,過濾,分頁等),希望對大家有所協助,如果大家有任何疑問請給我留言,小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援!