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,//Paging function "Blengthchange": true,//change the number of data per page "Bfilter": true,//Filter function "Bsort": false,//Sort function "Binfo": true, Footer Information "Bautowidth": true//Auto 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-per page//f– filter input//t– form table//i– Information//p– 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_ bar data) "," Opagin Ate ": {" Sfirst ":" Home "," sprevious ":" Previous "," Snext ":" Next "," Slast ":" Last "}," Szerorecords ":" No Data Retrieved "," sprocessing ":" < IMG src=\ ' #\ ' "/loading.gif '/>"}}); );
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], [+], "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": ["D ESC "," 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 "Fnserverdata" using the Post method: 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"},{"SN Ame ":" 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
The server side returns the format of the 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
More references:
It is important to note that the table object to be processed by the DataTable must have Thead and tbody, and that the structure should be structured (the data is not necessarily complete) so that it can be handled correctly.
Here are the parameters that you can attach when you are working with a DataTable binding:
Property name |
Range of values |
Explain |
Bautowidth |
True or FALSE, default True |
Whether the table column widths are automatically calculated |
Bdeferrender |
True or FALSE, default false |
One parameter for rendering |
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 use the jquery UI Themeroller style |
Blengthchange |
True or FALSE, default True |
switch, whether to display a selection bar per page length (requires a pager support) |
Bpaginate |
True or FALSE, default True |
switch, whether to display (use) the page splitter |
Bprocessing |
True or FALSE, Defualt false |
Switch to specify whether the "processing" message is displayed when the data is being processed |
Bscrollinfinite |
True or FALSE, default false |
Switch to specify whether infinite scrolling (used in conjunction with sscrolly) is useful in large amounts of data. When this flag is true, the paging device 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 increase classes ' sorting_1 ', ' sorting_2 ' and ' sorting_3 ' when the current column is sorted, and when it is open, performance is lost when processing 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 reopen the browser, the previous state is saved. |
Sscrollx |
' Disabled ' or ' 100% ' similar string |
Whether to turn on horizontal scrolling and specify the size of the scroll area |
Sscrolly |
' Disabled ' or ' 200px ' similar string |
Whether to turn on vertical scrolling and specify the size of the scrolling area |
-- |
-- |
-- |
Options |
|
|
Aasorting |
Array array[int,string], such as [], [[0, ' ASC '], [0, ' desc '] |
Specify the basis for sorting by multiple columns of data |
Aasortingfixed |
Ditto |
Ditto. The only difference is that they cannot be conflicting with the user's custom configuration. |
Alengthmenu |
Default [10, 25, 50, 100], can be 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 using a two-dimensional array, the two-dimensional plane can only have two elements, the first is to display the number of entries per page option, the second is about these options explained |
Aosearchcols |
Default NULL, similar to: [NULL, {"Ssearch": "My Filter"}, null,{"Ssearch": "^[0-9]", "Bescaperegex": false}] |
Define its initialization search list attribute separately for each column (this piece is not yet understood) |
Asstripclasses |
default [' odd ', ' even '], such as [' Strip1 ', ' strip2 ', ' STRIP3 '] |
Specifies the class style to be applied to each row, automatically looping |
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 performed |
Bscrollcollapse |
True or FALSE, default false |
Specify the appropriate time to indent the scrolling 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 in a cookie, after which it expires automatically |
Ideferloading |
Integer, default is null |
Lazy loading, whose parameters are the number of entries to be loaded, usually in conjunction with Bserverside,sajaxsource, etc. |
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 displaying to the table |
Iscrollloadgap |
Integer, default = 100 |
Lets you specify how many data can be displayed at most one screen when the DataTable is set to scroll |
OSearch |
Default {"Ssearch": "", "Bregex": false, "Bsmart": true} |
The initial time of the specified search parameters related, a little complicated, not understand the current |
Sajaxdataprop |
String, default ' Aadata ' |
Specifies the name of the data item to use when fetching tabular data 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 state store attribute 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 supplement the instructions. |
Spaginationtype |
' Full_numbers ' or ' Two_button ', default ' Two_button ' |
Used to specify the style of the page selector |
Sscrollxinner |
String Default ' disabled ' |
It's about horizontal scrolling, and I don't know what it means. |
The DataTable supports the following callback functions
callback Function name |
Parameters |
return value |
Default |
Function |
Fncookiecallback |
1.string:name of the cookie defined by DataTables 2.object:data to being stored in the cookie 3.string:cookie expires Stri Ng 4.string:path of the cookie to set |
String:cookie formatted string (which should be encoded by using encodeuricomponent ()) |
Null |
This function call is triggered every time the cookie is changed |
Fndrawcallback |
No |
No |
No |
Call after each table is draw, as for what to do, just look at it. |
Fnfootercallback |
1.node: "TR" element for the footer 2.array array strings:full table data (as derived from the original HTML) 3.int:i Ndex for the current display starting point in the display array< 4.int:index for the current display ending point in The display array 5.array int:index array to translate the visual position to the full data array |
No |
No |
Used to modify the foot of the table at each redraw |
Fnformatnumber |
1.int:number to be formatted |
string:formatted string for DataTables to show the number |
Has the default |
For large numbers, automatically add some commas, separating the |
Fnheadercallback |
1.node: "TR" element for the header 2.array array strings:full table data (as derived from the original HTML) 3.int:i Ndex for the current display starting point in the display array 4.int:index for the current display ending the Display array 5.array int:index array to translate the visual position to the full data array |
No |
No |
Used to modify the header of a table each time the draw occurs |
Fninfocallback |
1.object:datatables Settings Object 2.int:starting position in data for the draw 3.int:end position in data for the DRA W 4.int:total number of rows in the table (regardless of filtering) 5.int:total number of rows in the data set, after fi Ltering 6.string:the String that DataTables have formatted using it s own rules |
String:the string to is displayed in the information element. |
No |
Used to communicate table information |
Fninitcomplete |
1.object:osettings-datatables Settings Object |
No |
No |
Called when table initialization is complete |
Fnpredrawcallback |
1.object:osettings-datatables Settings Object |
Boolean |
No |
Used to call before starting to draw, return false to prevent the draw event from occurring, return other values, draw can execute smoothly |
Fnrowcallback |
1.node: "TR" element for the current row 2.array Strings:raw data array for this row (as derived from the original HTML 3.int:the Display index for the current table draw 4.int:the index of the data in the full list of rows (after Filte Ring |
Node: "TR" element for the current row |
No |
Called when a row is created but not yet drawn to the screen, typically used to change the class style of a row |
Fnserverdata |
1.string:http source to obtain the data from (i.e. Sajaxsource) 2.array objects:a key/value pair object containing the D ATA to send to the server 3.function:function to being called on completion of the data get process that would draw the data On the page. |
void |
$.getjson |
Used to replace the default send to service-side request operation |
Fnstateloadcallback |
1.object:osettings-datatables Settings Object 2.object:odata-object containing information retrieved from the State SA Ving Tsun cookie which should be restored. For the exact properties of refer to the DataTables code. |
Boolean-false if the state should not being loaded, true otherwise |
No |
The data in the cookie is executed before it is loaded, and can be easily modified |
Fnstatesavecallback |
1.object:osettings-datatables Settings Object 2.string:svalue-a JSON String (without the final closing brace) which SH Ould is stored in the state saving cookie. |
String-the full string that should is used to save the state |
No |
It is easy to do some pre-operation before the state data is stored in the cookie. |
jquery plugin Jquery.datatables.js usage and API