DataTables control usage and experience (1), datatables Control

DataTables control usage and experience (1), datatables Control
What is DataTables?

• DataTables is a front-end list component based on HTML, CSS, and JavaScript.
• Based on JQuery
• Open source and free (except for special support services)
• Main Features: High Performance, responsive, and complete functions
• The main website is http://www.datatables.net/

Full and comprehensive functions of DataTables

Its development team has injected a lot of effort and has complete functions. It can meet the development needs of most front-end lists.

Rich APIs and support

It has rich Options and functions to define and control controls and implement various flexible configurations and functions.

Although it is an open-source free software, it has a high level of support and frequent updates. The main website is rich in content and detailed, and it also provides paid support services.

Excellent quality, stability and performance

It is claimed that more than 2900 sets of unit test code are supported. Its main JS library is compressed with only 26 KB. In addition, its core Render Mechanism, it is only the display part of the Render list (10000 pages of 200 data, only 50 data records on one page of render), providing a stable and efficient Foundation.

Rich Functions

Currently, some valuable functions include:

• Supports Ajax Data Acquisition and provides real paging implementation solutions.
• DataTables, jQuery UI, Bootstrap, and Foundation
• Fully supports responsive design
• Perfect support for sorting, page turning, custom row and column explicit hiding, style and content.
• Automatically control column width.
• Flexible control of table scroll bar settings.
• Multi-language support
• In addition, the extension function can also be used to achieve
  • Column dragging
  • Single Column Filtering
  • Fixed rows or columns
  • Edit in table
  • A small number of Excel functions (such as keyboard selection and drag assignment)
  • Excel and PDF export functions

DataTables Installation

Step 1:Download and introduce the main JS file of DataTables: jquery. dataTables. js or jquery. dataTables. min. js.

You can also use CDN:

Official CDN: http://cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js

Bootstrap CDN: http://cdn.bootcss.com/datatables/1.10.6/js/jquery.dataTables.min.js

In addition, if you want to introduce CSS, you can download several common CSS styles officially provided:

Http://www.datatables.net/manual/styling/

Step 2:Call the Ables component for the specified list element on the page.

$(document).ready(function() {    $('#example').dataTable();} );

• # Example corresponds to a table element with id = example.
• In general, the dataTable function takes an object as the parameter. This parameter object is the Options of DataTables. These Options are used to control various features of list controls. (For more information about Options, see the official documentation)

Of course, without any Options, DataTables provides a standard interface, such:

 

The upper left is the control of the number of entries in the page (10 entries on one page by default), the upper right is the simple search function, the middle is the list body, the lower left is the page information, and the lower right is the page control. you can use Options to hide, control, and customize these controls.

Three common data methods of DataTables: HTML data

All data already exists in the TR and TD modes of the specified Table element. At this time, you can call the default able function to implement the default functions of this component. The call method is similar to the standard mode.

$(document).ready(function() {    $('#example').dataTable();} );

 

JS Object Data

The specified Table element does not need any data. The dataTable function loads data to the control through a JS array object. The statement is as follows:

 

$('#example').dataTable( {      "data": dataSet    } );   

 

Note that dataset is an array object in the following format: [obj1, ojb2, ojb3…] , Each obj object corresponds to the data of each row, and the attributes of this object are bound to each column in sequence.

Remote Data

Attackers can remotely obtain Json data through Ajax and bind it to the control. The syntax is as follows:

 $('#example').dataTable( {        "ajax": url    } );

The url is the address of the remote request.

Note that, due to the internal implementation mechanism of dataTables, the returned json is not a simple array object, but an object that contains a data attribute. The specific format is as follows:

{"Data": [obj1, obj2, obj3…] }

DataTables FAQs

For the data loading mode in the following two, we can think that the <tbody> in the original Table element does not need to define any content. however, <thead> can have two options, which are defined in HTML and bound by the dataTable function; or completely bound and generated by the dataTable. if the data is completely generated by the dataTable control, the statement is as follows:

 

  $('#example').dataTable( {        "data": dataSet,        "columns": [            { "title": "Engine"},            { "title": "Browser"},            { "title": "Platform"},            { "title": "Version", "class": "center"},            { "title": "Grade", "class": "center"}        ]    } );   

Of course, even if we use HTML to define <thead>, but the order of the attributes in the data is different from that in <th>, or some attributes do not need to be displayed, what should we do, you can still define columns through columns configuration attributes.

$('#example').dataTable( {        "data": dataSet,        "columns": [            { "data": "Engine"},            { "data": "Browser"},            { "data": "Platform"},            { "data": "Version"}        ]    } );   

In addition, after using the standard able function, the list loaded by the above three data methods can be perfectly implemented, simple search, paging, and sorting functions (the implementation of truly turning pages is a little more complex, in this subsequent article ).

This article is only an entry-level article,Let everyone have a preliminary understanding of the basic appearance of this component,I will discuss some of the more detailed content in the subsequent blog,If you are interested in this control,Or you are using this control,Hope to communicate with me,Please do not hesitate to inform us.