JQuery table plug-in datatables usage summary, jquerydatatables

JQuery table plug-in datatables usage summary, jquerydatatables

DataTables is a jQuery table plug-in. This is a highly flexible tool based on a step-by-step enhancement that will add advanced interactive control and support for any HTML table.

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

The latest version is 1.10.2. You can download it from this site.

Its main features are as follows:

1. Automatic Paging
2. Real-time table data filtering
3. Data Sorting and automatic data type detection
4. automatically process column width
5. You can customize styles through CSS.
6. columns can be hidden.
7. ease of use
8. scalability and flexibility
9. Internationalization
10. dynamically create a table
11. Free

Usage:

First, take a 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. It can be copied in the demo. Note the path address.

Next let's 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 did not display very well when using "sPaginationType": "full_numbers" // pagination });}); </script> 
The above results can be created by page. Sort. And so on.
Finally, let's talk about each attribute (the main position to add)

// $ (Document ). ready (function () {// $ ('# example '). dataTable ({// load // "bPaginate": true, // pagination button // "bLengthChange": true, // number of records displayed per row // "bFilter": true, // search bar // "bSort": true, // sort // "bInfo": true, // Showing 1 to 10 of 23. The total number of entries records does not show much information. // "bAutoWidth": true}); // $ (document ). ready (function () {// $ ('# example '). dataTable ({// "aaSorting": [[4, "desc"] // sorts the list. The first parameter indicates an array. 4 is the css grade column. The second parameter is desc or asc //}); // $ (document ). ready (function () {// $ ('# example '). dataTable ({// "aoColumns": [// * Engine */null, // default // * Browser */null, /// * Platform */{"bSearchable": false, // cannot participate in the search // "bVisible": false }, // invisible ///* Version */{"bVisible": false}, // invisible ///* Grade */null //]}); //}); // $ (document ). ready (function () {// $ ('# example '). dataTable ({//}); // $ (document ). Ready (function () {// $ ('# example '). dataTable ({// "sDom ": '<"top" I> rt <"bottom" finished <"clear">' // The custom layout is not quite complex. * L-Length changing * f-Filtering input * t-The table! * I-Information * p-Pagination * r-pRocessing * <and>-div elements * <"class" and>-div with a class * Examples: <"wrapper" flept>, <lf <t> ip> //}); // $ (document ). ready (function () {// $ ('# example '). dataTable ({// "bStateSave": true // It is very important to save the status to cookie, when a page is refreshed during a search, the search will disappear. This attribute can be used to avoid //}); // $ (document ). ready (function () {// $ ('# example '). dataTable ({// "sPaginationType": "full_numbers" // page, two styles in total; the other is two_button, which is the default/Ables //});//}); // $ (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, // you can add jqury ui theme. You need to add css "sPaginationType": "full_numbers "});});
The default language is English. Of course, it can be internationalized:
"SUrl": "/SSS/dataTables/de_DE.txt" add an international file. If the name is correct. The content of the International file I wrote is as follows, which can be directly copied to txt for use.
{"SProcessing": "Bitte warten... "," sLengthMenu ":" display _ MENU _ entries "," sZeroRecords ":" No content you want to search for "," sInfo ": "From _ START _ to _ END _ records -- TOTAL number of records is _ TOTAL _", "sInfoEmpty": "number of records is 0", "sInfoFiltered ": "(number of all records _ MAX _)", "sInfoPostFix": "", "sSearch": "Search", "sUrl": "", "oPaginate ": {"sFirst": "First page", "sPrevious": "Previous Page", "sNext": "Next page", "sLast": "last page "}}
These are the basic parts of datatables. Easy to master.
I hope this article will help you learn jQuery programming.

Jquery DataTables plug-in usage Problems
If your table is named example and has a total of five columns, you do not want to sort 2 or 3 columns.
$ (Document ). ready (function () {$ ('# example '). dataTable ({"aoColumns": [null, {"asSorting": []}, {"asSorting": []}, null, null]});

What does a row do not require paging?

Question about the jquery datatables plug-in URL: http: // wwwdatatablesnet
Separate
$ ('# Example'). dataTable ({
"BProcessing": true,
"SAjaxSource": 'arrays.txt'
}); Can it be displayed? If it cannot be displayed, you may need to put the file on the server; if it can be displayed, it may be related to the loadHTML () method, and the line below you, there is no data and ...... where did I set it?