DataTables is a jquery form plug-in. It is a highly flexible tool that allows you to add advanced interactivity to any HTML table.
Main function
Paging, Instant Search and sorting
Supports almost any data source: DOM, JavaScript, Ajax, and server processing
Supports different themes DataTables, JQuery UI, Bootstrap, Foundation
All kinds of extensions: Editor, Tabletools, Fixedcolumns ...
A rich variety of option and powerful APIs
Support Internationalization
More than 2900+ unit tests
Free source (MIT license)! Business Support
More features please check the website
Here's how the DataTable uses Ajax to get data and dynamically load the DOM. This also facilitates data management and avoids the large number of TR in HTML pages, which looks messy.
Display effects
source files
First you need to introduce the DataTables source file:
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
Use
Html
Just define a table, give a unique flag (ID or unique Class);
<table class= "Table table-bordered table-striped" id= "dailytable" ></table>
Js
After the page element rendering is complete, get the table and use DataTables to manipulate it.
Ajax is the URL of the data, the local data used here, the relative path. Of course, you can also use HTTP requests
Columns is an array that defines the title of the table and how many interfaces the array will display. Format must be {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
There are too many data here, just to illustrate the format.
The JSON data format is a two-dimensional array whose data needs to be wrapped under the "Data" field. The data for each two-dimensional array is sorted in the title order in JS.
{"
data": [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$320,800"
],
[
"Garrett Winters",
"accountant",
"Tokyo",
"8422",
"2011/07/25",
"$170,750"
]
]
}
The above is a small set to introduce the datatables+bootstrap combination of using AJAX to obtain data and dynamic loading Dom method (sorting, filtering, paging, etc.), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!