JQuery DataTable Use 141105

This article is a total of four parts: official website | basic Usage | 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

$ (". DataTable"). DataTable ({"Aocolumndefs": [{"bsortable": false, "atargets": [0]}]}); 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 plain copy print? "Alengthmenu": [[4, 10, 20,-1], [4, 10, 20, "all"]], "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" when the current column is sorted, &