DataTables+BootStrap組合使用Ajax來(lái)獲取數(shù)據(jù)并且動(dòng)態(tài)加載dom的方法(排序,過(guò)濾,分頁(yè)等)
Datatables是一款jquery表格插件。它是一個(gè)高度靈活的工具,可以將任何HTML表格添加高級(jí)的交互功能。
主要功能
分頁(yè),即時(shí)搜索和排序
幾乎支持任何數(shù)據(jù)源:DOM, javascript, Ajax 和 服務(wù)器處理
支持不同主題 DataTables, jQuery UI, Bootstrap, Foundation
各式各樣的擴(kuò)展: Editor, TableTools, FixedColumns ……
豐富多樣的option和強(qiáng)大的API
支持國(guó)際化
超過(guò)2900+個(gè)單元測(cè)試
免費(fèi)開源 ( MIT license )! 商業(yè)支持
更多特性請(qǐng)到官網(wǎng)查看
這里主要講一下DataTable使用Ajax來(lái)獲取數(shù)據(jù)并且動(dòng)態(tài)加載dom的方法。這樣也方便了數(shù)據(jù)管理,也避免了HTML頁(yè)面中大量的tr,看起來(lái)很凌亂。
顯示效果
源文件
首先需要引入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
只需要定義一個(gè)table,給一個(gè)唯一的標(biāo)志(id或者唯一的class);
<table class="table table-bordered table-striped" id="dailyTable"></table>
JS
在頁(yè)面元素渲染完成之后,獲取table,使用dataTables對(duì)其操作。
ajax是數(shù)據(jù)的url,這里用的本地?cái)?shù)據(jù),使用的是相對(duì)路徑。當(dāng)然,也可以使用HTTP請(qǐng)求
columns是一個(gè)數(shù)組,定義的是表格的標(biāo)題,數(shù)組有多少個(gè)界面就會(huì)顯示多少。格式必須是{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
這里數(shù)據(jù)太多,只說(shuō)明一下格式。
json數(shù)據(jù)格式為二維數(shù)組,其數(shù)據(jù)需要被包裹在"data"字段下面。每個(gè)二維數(shù)組的數(shù)據(jù)按照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來(lái)獲取數(shù)據(jù)并且動(dòng)態(tài)加載dom的方法(排序,過(guò)濾,分頁(yè)等),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 完美實(shí)現(xiàn)bootstrap分頁(yè)查詢
- bootstrap table 服務(wù)器端分頁(yè)例子分享
- Bootstrap Paginator分頁(yè)插件使用方法詳解
- Angular.js與Bootstrap相結(jié)合實(shí)現(xiàn)表格分頁(yè)代碼
- Bootstrap table分頁(yè)問(wèn)題匯總
- 第一次動(dòng)手實(shí)現(xiàn)bootstrap table分頁(yè)效果
- BootStrap Table 分頁(yè)后重新搜索問(wèn)題的解決辦法
- Bootstrap分頁(yè)插件之Bootstrap Paginator實(shí)例詳解
- 基于Bootstrap3表格插件和分頁(yè)插件實(shí)例詳解
- bootstrap與pagehelper實(shí)現(xiàn)分頁(yè)效果
相關(guān)文章
jQuery將多條數(shù)據(jù)插入模態(tài)框的示例代碼
這篇文章主要介紹了使用jQuery將多條數(shù)據(jù)插入模態(tài)框的方法,很簡(jiǎn)單,很實(shí)用,需要的朋友可以參考下2014-09-09jQuery實(shí)現(xiàn)中獎(jiǎng)播報(bào)功能(讓文本滾動(dòng)起來(lái)) 簡(jiǎn)單設(shè)置數(shù)值即可
這篇文章主要介紹了jQuery實(shí)現(xiàn)中獎(jiǎng)播報(bào)功能(讓文本滾動(dòng)起來(lái)) 簡(jiǎn)單設(shè)置數(shù)值即可,文中通過(guò)實(shí)例代碼給大家詳細(xì)介紹,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03jquery動(dòng)態(tài)更換設(shè)置背景圖的方法
這篇文章主要介紹了jquery動(dòng)態(tài)更換網(wǎng)頁(yè)背景圖的方法,需要的朋友可以參考下2014-03-03

基于jquery的彈出提示框始終處于窗口的居中位置(類似于alert彈出框的效果)

關(guān)于JQuery($.load)事件的用法和分析