datatables-use detailed instructions to organize

Source: Internet
Author: User

This article is a total of four parts: official website | Basic Use | Problems encountered | property sheet

One: official website: [http://www.datatables.net/]

Two: basic use: [Http://www.guoxk.com/node/jquery-datatables]

1, the default configuration of DataTables

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

Example: http://www.guoxk.com/html/DataTables/Zero-configuration.html

2. Some basic property configuration of DataTables

"Bpaginate": true,//page turn function
"Blengthchange": true,//change the number of data displayed per page
"Bfilter": true,//filter function
"Bsort": false,//Sort function
"Binfo": true,//footer Information
"Bautowidth": true//automatic width

Example: http://www.guoxk.com/html/DataTables/Feature-enablement.html

3. Sorting Data

$ (document). Ready (function () {
$ (' #example '). DataTable ({
"Aasorting": [
[4, "DESC"]
]
} );
} );

Starting from column No. 0, in descending order of 4th column

Example: http://www.guoxk.com/html/DataTables/Sorting-data.html

4, multi-column sorting

Example: http://www.guoxk.com/html/DataTables/Multi-column-sorting.html

5. Hide some columns

$ (document). Ready (function () {
$ (' #example '). DataTable ({
"Aocolumndefs": [
{"Bsearchable": false, "bvisible": false, "atargets": [2]},
{"Bvisible": false, "Atargets": [3]}
] } );
} );

Example: http://www.guoxk.com/html/DataTables/Hidden-columns.html

6. Change the position of elements on the page

$ (document). Ready (function () {
$ (' #example '). DataTable ({
"Sdom": ' < ' top ' fli>rt< ' bottom ' p>< ' clear ' > '
} );
} );
L/Page Display quantity
F-Filter input
T-form table
I-Information
P-Flip Page
R-processing
< and >-div elements
< "class" and >-div with a class
Examples: < "wrapper" FLIPT>, <lf<t>ip>

Example: http://www.guoxk.com/html/DataTables/DOM-positioning.html

7, state Save, use the page turn or change the amount of data displayed on the pages, will be saved in the cookie, the next time the visit will show the content of the last time the page was closed.

$ (document). Ready (function () {
$ (' #example '). DataTable ({
"Bstatesave": True
} );
} );

Example: http://www.guoxk.com/html/DataTables/State-saving.html

8, display the number of page flip style

$ (document). Ready (function () {
$ (' #example '). DataTable ({
"Spaginationtype": "Full_numbers"
} );
} );

Example: http://www.guoxk.com/html/DataTables/Alternative-pagination-styles.html

9, Horizontal limit width

$ (document). Ready (function () {
$ (' #example '). DataTable ({
"Sscrollx": "100%",
"Sscrollxinner": "110%",
"Bscrollcollapse": True
} );
} );

Example: http://www.guoxk.com/html/DataTables/Horizontal.html

10, Vertical limit height

Example: http://www.guoxk.com/html/DataTables/Vertical.html

11, horizontal and vertical two direction common limit

Example: http://www.guoxk.com/html/DataTables/HorizontalVerticalBoth.html

12. Change the language

$ (document). Ready (function () {
$ (' #example '). DataTable ({
"Olanguage": {
"Slengthmenu": "Show _menu_ Records per page",
"Szerorecords": "Sorry, not Found",
"Sinfo": "From _start_ to _end_/total _total_ data",
"Sinfoempty": "No Data",
"Sinfofiltered": "(retrieved from _max_ data)",
"Opaginate": {
"Sfirst": "Home",
"Sprevious": "Previous Page",
"Snext": "Next Page",
"Slast": "Last"
},
"Szerorecords": "No Data Retrieved",
"Sprocessing": "}
} );
} );

Example: http://www.guoxk.com/html/DataTables/Change-language-information.html

13. Click event

Example: http://www.guoxk.com/html/DataTables/event-click.html

14/with the ToolTip plugin

Example: http://www.guoxk.com/html/DataTables/tooltip.html

15. Define the number of data displayed per page

$ (document). Ready (function () {
$ (' #example '). DataTable ({
"Alengthmenu": [[1], [+], [[Ten], [ten], [+], "all"]
} );
} );

Example: http://www.guoxk.com/html/DataTables/length_menu.html

16. Row Callback

Example: http://www.guoxk.com/html/DataTables/RowCallback.html

The value of the last column is bold if "A" is displayed

17. Sorting control

$ (document). Ready (function () {
$ (' #example '). DataTable ({
"Aocolumns": [
Null
{"Assorting": ["ASC"]},
{"Assorting": ["desc", "ASC", "ASC"]},
{"assorting": []},
{"assorting": []}
]
} );
} );

Example: http://www.guoxk.com/html/DataTables/sort.html
Note: The first column is sorted by default, the second column is ordered, the third column clicks the reverse order, two or three orders, the 45th column does not implement the sorting

18. Read the language pack from the configuration file

$ (document). Ready (function () {
$ (' #example '). DataTable ({
"Olanguage": {
"sURL": "Cn.txt"
}
} );
} );

19, is using the Ajax source

$ (document). Ready (function () {
$ (' #example '). DataTable ({
"Bprocessing": true,
"Sajaxsource": './arrays.txt '
} );
} );

Example: http://www.guoxk.com/html/DataTables/ajax.html

20. Use Ajax to organize the data on the server side

$ (document). Ready (function () {
$ (' #example '). DataTable ({
"Bprocessing": true,
"Bserverside": true,
"Spaginationtype": "Full_numbers",

"Sajaxsource": "./server_processing.php",
/* If you add the following paragraph, the data is passed using the Post method
"Fnserverdata": Function (ssource, Aodata, Fncallback) {
$.ajax ({
"DataType": ' JSON ',
"Type": "POST",
"url": ssource,
"Data": Aodata,
"Success": Fncallback
} );
}*/
"Olanguage": {
"sURL": "Cn.txt"
},
"Aocolumns": [
{"SName": "Platform"},
{"SName": "Version"},
{"SName": "Engine"},
{"SName": "Browser"},
{"SName": "Grade"}
]//$_get[' Scolumns '] will receive aocolumns pass data
} );
} );

Example: http://www.guoxk.com/html/DataTables/ajax-serverSide.html

21. Load ID and class for each line

Format of the server-side return data:

{
"Dt_rowid": "Row_8",
"Dt_rowclass": "Gradea",
"0": "Gecko",
"1": "Firefox 1.5",
"2": "Win 98+/osx.2+",
"3": "1.8",
"4": "A"
},

Example: http://www.guoxk.com/html/DataTables/add_id_class.html

22. Display details for each line, click "+" at the beginning of the line to expand the detail display

Example: http://www.guoxk.com/html/DataTables/with-row-information.html

23. Select multiple Lines

Example: http://www.guoxk.com/html/DataTables/selectRows.html

22. Integrated jquery Plugin Jeditable

Example: http://www.guoxk.com/html/DataTables/jEditable-integration.html

Sample package Download: Http://www.guoxk.com/html/DataTables/DataTables.rar

Third, the problems encountered

3.1 "Cannot reinitialise DataTable.
To retrieve the DataTables object for this table, pass no arguments or see the docs for Bretrieve and Bdestroy "

Workaround: http://blog.csdn.net/mickey_miki/article/details/8239185

3.2 Specifying a column is not sortable when sorting

    1. $ (". DataTable"). DataTable ({
    2. "Aocolumndefs": [{ "bsortable": false, "atargets": [0]}]
    3. });

Note: "Bsort": true,//Sort function to comment out

3.3 OK Select the list of impressions per page and the default number of impressions per page setting

[JavaScript]View Plaincopyprint?
    1. "Alengthmenu": [[4, ten, 1], [4, Ten, ' all ']],
    2. "Idisplaylength": 4

Iv. attribute Table

Property name

Value limitation

Statement

Bautowidth

True or FALSE, default True

Whether to actively draw the table column width

Bdeferrender

True or FALSE, default false

A parameter for the liner

Bfilter

True or FALSE, default True

Switch, whether the client filtering feature is enabled

Binfo

True or FALSE, default True

switch, whether to display some information about the table

Bjqueryui

True or FALSE, default false

Whether to apply the jquery UI Themeroller style

Blengthchange

True or FALSE, default True

switch, whether to display a selection bar for each page length (requires a pager support)

Bpaginate

True or FALSE, default True

switch, whether to display (apply) the paging device

Bprocessing

True or FALSE, Defualt false

Switch to specify whether the "processing penalty" message is displayed when the penalty data is being processed

Bscrollinfinite

True or FALSE, default false

Switches to specify whether an infinite migration transition (in conjunction with sscrolly) is effective in large data volumes. When this mark is true, the pager is closed by default

Bsort

True or FALSE, default True

Switch, do you want columns to have sort by column function

Bsortclasses

True or FALSE, default True

Switch that specifies whether to grow classes "" sorting_1 "" "" "" "" Sorting_2 "" "and" "Sorting_3" when the current column is sorted, when it is opened, the function is lost when processing the penalty big data.

Bstatesave

True or FALSE, default false

Switch, whether to turn on the client state logging feature. This data is recorded in the cookie, after you open the record, even if you refresh the page, or open the browser from the beginning, the previous situation is saved.

Sscrollx

"Disabled" "or?" "" 100% ""? Similar string

Whether to turn on degree migration transitions and specify the size of the migration transition area

Sscrolly

"" "Disabled" "or" "200px" "? Similar string

Whether to turn on a vertical migration transition and specify the size of the migration transition area

--

--

--

Options

?

?

Aasorting

Array array[int,string], such as [], [[0, "" ASC "], [0," "desc" "]]

Specifies the basis for sorting by multiple columns of data

Aasortingfixed

Ditto

Ditto. The only point is not to be the user's custom device conflict

Alengthmenu

Default [10, 25, 50, 100], can be considered as a one-dimensional array, can also be a two-dimensional array, such as: [[Ten,, 1,-+], [ten, A, +, "all"]]

This is to select the number of entries per page, when applying a two-dimensional array, the two-dimensional plane can only have two elements, the first is the option to display the number of entries per page, and the second is a statement about these options

Aosearchcols

Default NULL, similar to: [NULL, {"Ssearch": "My Filter"}, null,{"Ssearch": "^[0-9]", "Bescaperegex": false}]

Define the characteristics of the initial loot list for each column 0 (this piece is not yet understood)

Asstripclasses

default ["" "Odd" "," "even" "], for example [" "" Strip1 "", "" Strip2 "", "" STRIP3 ""]

Specifies the class style to be applied to each row, and the active reincarnation

Bdestroy

True or FALSE, default false

Used to erase the previous data object when it is time to perform a new DataTable binding on the same element, swapping the new object settings

Bretrieve

True or FALSE, default false

Used to indicate whether a DataTable object is returned when a DataTable binding is fulfilled

Bscrollcollapse

True or FALSE, default false

Specify the appropriate time to shrink the migration transition view

Bsortcellstop

True or FALSE, default false

(Unknown stuff)

Icookieduration

Integer, default 7200, in seconds

Specifies the length of time that is used to store client information into a cookie, after which the active expiration is crossed

Ideferloading

Integer, default is null

Delay load, its parameters are to load the number of targets, generally with bserverside,sajaxsource and other common applications

Idisplaylength

Integer, default = 10

To specify the number of bars to display on a screen, turn on the paging device

Idisplaystart

Integer, default = 0

Used to specify from which data to start display in the table

Iscrollloadgap

Integer, default = 100

Lets you specify a maximum of one screen of data to display when the DataTable is set to a migration transition

OSearch

Default {"Ssearch": "", "Bregex": false, "Bsmart": true}

The initial time to specify the parameters of the coherent, a little jumbled, do not understand the present

Sajaxdataprop

String, default "" Aadata ""

Specifies the name of the data item to be applied when the table data is fetched from the server

Sajaxsource

URL string, default null

Specify which URL to fetch data from

Scookieprefix

String, default "" Sprymedia_datatables_ ""

Used to specify the prefix name of the string stored in the cookie when the health store feature is opened

Sdom

Default Lfrtip (when Bjqueryui was false) or < "H" lfr>t< "F" ip> (when Bjqueryui is true)

This is a powerful attribute for defining a DataTable layout, and another special document to add to the statement.

Spaginationtype

"Full_numbers" "or" "Two_button" ", Default" "Two_button" "

Used to specify the style of the page selector

Sscrollxinner

String Default "" Disabled ""

It's the extent of the shift, and it doesn't make sense.

Datatables-using detailed instructions

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.