DataTables Use of learning Records

Import

<link rel= "stylesheet" type= "Text/css" href= "Datatables-1.10.12/media/css/jquery.datatables.css" >

<scripttype= "Text/javascript" charset= "UTF8" src= "datatables-1.10.12/media/js/jquery.js" ></script>

<scripttype= "Text/javascript" charset= "UTF8" src= "datatables-1.10.12/media/js/jquery.datatables.js" ></ Script>

Three core concepts

Processing mode

There are two different ways to work with data (sort, search, paging, and so on) in DataTables:

• Client-side processing-all data sets are preloaded (all at once), and data processing is "logical paging" done in the browser.
• Server-side processing (serverside)-Data processing is "physical paging" performed on the server (the page processes only the current page's data).

Each model has its own strengths and weaknesses, and the choice of which mode is determined by the amount of data you have. Based on experience, with less than 10,000 rows of data you can choose Client mode, more than 10,000 rows using server-side processing. Note that both processing modes cannot be used at the same time, but can be changed dynamically from one mode to another.

Server mode requires properties to be enabled serverSideOption

Data type

The data source used by DataTables must be an array, each item of the array will be displayed on the line you define, using three basic JS data as the data Source: Array (arrays[]), Object, (objects{}) instance, (new MyClass ()) The default mode of operation is an array, and objects and instances can handle more complex data

Array

Arrays are easy to use in DT, and when using arrays as data sources, the number of elements per array must equal the number of columns in the table

Object

You only need to use the name of a property. Like Data.name, not data[0]

Instance

An instance can be defined as an abstract method to update the data

Data source

DT supports three kinds of data sources to display the Dom,js,ajax

Commonly used (Common options)

Some of the more useful options are listed below:

• ajax-Asynchronous data Source configuration
• data-JavaScript Data Source Configuration
• serverSide-Turn on server mode
• columns.data-Configure the data source for each column
• scrollX-Horizontal scroll bar
• scrollY-Vertical scroll bar

DataTables has a powerful API to manipulate the data in the table, and he has the following six key sections:

• Form
• Column
• Yes
• Cell
• Core approach
• Tool class

DataTables complete list of methods, please refer to the API

A DataTables instance can be implemented in the following three ways:

• $ (selector). DataTable ();
• $ (selector). DataTable (). API ();
• New $.fn.datatable.api (selector);

The main note is to pay attention to $ (selector). The difference between a DataTable () and a $ (selector). DataTable (). The former returns an instance of the API in a DataTable, and the latter returns a JQuery object. An API () method is added to the jquery object, This allows you to easily access the API. But jquery objects can be used to manipulate table nodes, just as with any other jquery instance (like AddClass ()).

Practical method Link http://datatables.club/blog/listall.html# not timed a talk

DataTables Use of learning Records