Datatables+bootstrap combines Ajax to get data and dynamically load DOM methods (sorting, filtering, paging, etc.) _jquery

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!