Usage and API Example of jQuery.datatables.js Plugin

1Default Configuration of DataTables

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

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

2Basic Property Configuration of DataTables

"bPaginate": true, //Pagination Function
"bLengthChange": true, //Change the Number of Items Displayed Per Page
"bFilter": true, //Filtering Function
"bSort": false, //Sorting Function
"bInfo": true,//Footer Information
"bAutoWidth": true//Automatic Width

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

3Data Sorting

$.document.ready(function() {
$('#example').dataTable({
"aaSorting": [
[ 4, "desc" ]
]
});
});

Starting from the 0th Column, in the Order of the4Reverse Order of Columns

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

4Multi-column Sorting

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

5Hide 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

6Change the Position of Elements on the Page

$.document.ready(function() {
$('#example').dataTable({
"sDom": '<"top"fli>rt<"bottom"p><"clear">'
});
});
//l- Number of Items Per Page
//f - Filter Input
//t - Table Form
//i – Information
//p – Pagination
//r – Processing
//< and '> – div elements
//<"class" and '> – div with a class
//Examples: <"wrapper"flipt>, <lf<tip>>

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

7State saved, if you turn the page or change the number of entries displayed per page, it will be saved in the cookie, and the content of the last page closed will be displayed when you visit next time.

$.document.ready(function() {
$('#example').dataTable({
"bStateSave": true
});
});

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

8Pagination style showing numbers

$.document.ready(function() {
$('#example').dataTable({
"sPaginationType": "full_numbers"
});
});

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

9Restrict width horizontally

$.document.ready(function() {
$('#example').dataTable({
"sScrollX": ""100%
"sScrollXInner": ""110%
"bScrollCollapse": true
});
});

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

10Restrict height vertically

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

11Restrict both horizontal and vertical directions

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

12Change language

$.document.ready(function() {
$('#example').dataTable({
"oLanguage": {
"sLengthMenu": "Display _MENU_ entries per page"
"sZeroRecords": "Sorry, no data found"
"sInfo": "From _START_ to _END_" /Total _TOTAL_ entries
"sInfoEmpty": "No data available",
"sInfoFiltered": "(Filtered from _MAX_ entries)",
"oPaginate": {
"sFirst": "First page",
"sPrevious": "Previous page",
"sNext": "Next page",
"sLast": "Last page"
": "A"
"sZeroRecords": "No data found",
"sProcessing": "<img src='#'" /loading.gif' /">
}
});
});

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

13click event

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

14/Used with tooltip plugin

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

15Define the number of data displayed per page

$.document.ready(function() {
$('#example').dataTable({
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
});
});

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

16Row callback

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

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

17Sorting 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 when clicked, the second column is sorted when clicked, the third column is reversed when clicked once, and sorted twice, the fourth and fifth columns do not implement sorting when clicked

18Read the language package from the configuration file

$.document.ready(function() {
$('#example').dataTable({
"oLanguage": {
"sUrl": "cn.txt"
}
});
});

19Use 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 data on the server side

$.document.ready(function() {
$('#example').dataTable({
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "full_numbers",
"sAjaxSource": "."/server_processing.php"
/*If the following content is added, 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"
": "A"
"aoColumns": [
{"sName": "platform" },
{"sName": "version" },
{"sName": "engine" },
{"sName": "browser" },
{"sName": "grade" }
]//$_GET['sColumns'] will receive the data passed by aoColumns
});
});

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

21load id and class for each line

The format of the data returned by the server side:

{"}}
"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/}

22add_id_class.html+、To display details for each row, click the “

Example:http://www.guoxk.com/html/DataTables/” for detail display-with-row

23information.html

Example:http://www.guoxk.com/html/DataTables/、Select multiple rows

22、Integrated jQuery plugin jEditable

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

More references:

It should be noted that the table object to be processed by dataTable must have the thead and tbody, and the structure must be regular (the data does not have to be complete) so that it can be processed correctly.

The following are the parameters that can be attached when binding dataTable:

The above is the usage and API example of jQuery.datatables.js plugin introduced by the editor for everyone, I hope it will be helpful to everyone. If you have any questions, please leave a message, and the editor will reply to everyone in time. At the same time, I would also like to express my heartfelt thanks to everyone for their support of the Yelling tutorial website!

Statement: The content of this article is from the Internet, the copyright belongs to the original author, the content is contributed and uploaded by Internet users spontaneously, this website does not own the copyright, has not been manually edited, and does not bear relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please send an email to codebox.com (replace # with @ when sending email) to report violations, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.