jquery Table Plugin DataTables Usage Summary _jquery

DataTables is a jquery form plugin. This is a highly flexible tool, based on a step-by-step enhancement, which will add advanced interactive controls that support any HTML table.

Official website and its download address: http:/www.datatables.net

Currently the latest version of 1.10.2, readers can point to download this site.

The main features are as follows:

1. Automatic Paging processing
2. Instant Tabular Data filtering
3. Data sorting and data type automatic detection
4. Automatically handle column widths
5. Can be customized through the CSS style
6. Support for hidden columns
7. Easy to use
8. Scalability and flexibility
9. Internationalization
10. Create a table dynamically
11. Free of charge

How to use:

First look at the following code:

<title>datatables example</title> <style type= "text/css" title= "Currentstyle"
>
@import " .. /.. /media/css/demo_page.css ";
@import ". /.. /media/css/demo_table.css ";
@import ". /examples_support/themes/smoothness/jquery-ui-1.7.2.custom.css ";
</style>
<script type= "Text/javascript" language= JavaScript "src=". /.. /media/js/jquery.js "></script>
<script type=" Text/javascript "language=" JavaScript "src=". /.. /media/js/jquery.datatables.js "></script>
<script type=" Text/javascript "charset=" Utf-8 ">

The above code introduces JS and CSS files. Can be reproduced in the demo. Note the path address.

Next, take a look at the following code:

<script type= "Text/javascript" charset= "Utf-8" > $ (document). Ready (function () {$ (' #example '). DataTable ({" Olanguage ': {"sURL": "/sss/datatables/de_de.txt"}, "Bstatesave": true,//"Bjqueryui": true,//use jQueryUI.
I use the time to display is not very good "spaginationtype": "Full_numbers"//page});
} ); </script>  

The above can create a picture of the effect, pagination. Sort. Wait a minute.

Finally, talk about each of the attributes (the main added position)

$ (document). Ready (function () {//$ (' #example '). DataTable ({//Load//"Bpaginate": true,//Paging button//"Blengthchange": true,//number of records per line//"Bfilter": true,//Search bar//"Bsort": true,//sort//"Binfo": true,//showing 1 to a entries total
Record number does not also show how much such information/"Bautowidth": true});

//} ); $ (document). Ready (function () {//$ (' #example '). DataTable ({//Aasorting): [[4, Desc]]]//To sort the list, the first parameter represents the array. 4 is the list of CSS grade.
The second parameter is DESC or ASC//});

//} );
    $ (document). Ready (function () {//$ (' #example '). DataTable ({///Aocolumns): [///* Engine/NULL,///default /* Browser/NULL,/////* Platform/{"bsearchable": false,//not participate in search//"bvisible": false},//not
Visible///* Version/{"bvisible": false},//not visible////* Grade */NULL///]});

//} );

$ (document). Ready (function () {//$ (' #example '). DataTable ({//});//}); $ (document). Ready (function () {//$ (' #example '). DataTable ({//Sdom): ' < top ' i>rt< ' bottom ' flp<"  Clear ' > '//This is a custom layout. It's complicated. * L-length changing * f-filtering input* t-the table!* i-information* p-pagination* r-processing* < ; -Div elements* < "class" and >-div with a class * examples: < "wrapper" FLIPT&GT;, <lf<t>ip>//}
);

//} );  $ (document). Ready (function () {//$ (' #example '). DataTable ({//"Bstatesave": TRUE//Save state to Cookie *************** important , when the page is refreshed when the search disappears.
Use this property to avoid//});

//} ); $ (document). Ready (function () {//$ (' #example '). DataTable ({//Spaginationtype): "Full_numbers"/pagination, altogether two styles another for TW
O_button is datatables default//});

//} );
    $ (document). Ready (function () {//$ (' #example '). DataTable ({//paging information is not difficult to understand.) "Olanguage": {//"Slengthmenu": "Display _menu_ records per page",//"szerorecords": "Nothing Found-sorry"
      ,//"Sinfo": "Showing _start_ to _end_ of _total_ Records",//"sinfoemtpy": "Showing 0 to 0 of 0 records", "Sinfofiltered": "(Filtered from _max_ toTal Records) "///}//}); }) $ (document). Ready (function () {otable = $ (' #example '). DataTable ({"Bjqueryui": true,//can add Jqury UI theme need
Add css "Spaginationtype": "Full_numbers"});

 } );

The default language is English, of course, it can be internationalized:
"sURL": "/sss/datatables/de_de.txt" to add an internationalized file. A random path to the name is OK. The contents of the internationalized file I wrote are as follows, which can be copied directly into TXT.

{
"sprocessing": "Bitte warten ...",
"Slengthmenu": "Show _menu_ Bar",
"szerorecords": "No content you want to search for",
" Sinfo ":" From _start_ to _end_ Records--Total record number is _total_ bar ",
" Sinfoempty ":" Record number 0 ",
" sinfofiltered ":" (All Records _max_) ",
"Sinfopostfix": "",
"Ssearch": "Search",
"sURL": "",
"Opaginate": {
"Sfirst": "The  first page",
" Sprevious ": Previous page",
"Snext":   "Next page",
"slast":   "last Page"
}
}

These are the basic parts of DataTables. Relatively easy to master.

I hope this article will help you with the study of jquery programming.