What are jQuery datatables? How to use datatables?

Introduction to Datatables

DataTables is a jQuery table plug-in. This is a highly flexible tool based on progressive enhancements that will add advanced interactive controls and support for any HTML form. Main features:

• Automatic paging processing

• Instant table data filtering

• Data sorting and automatic detection of data types

• Automatic processing of column widths

• Style can be customized through CSS

• Supports hidden columns

• ##Ease of use

• Scalability and flexibility

• International Change

• Dynamic creation of tables

• Free

2. How to use
When doing the backend, there are no artists or front-end engineers to cooperate with you in making the page. In order to display the data and have a certain sense of beauty, we can use jQuery The DataTables plug-in to help us complete the task
1. The default configuration of DataTables

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

2. Some basic property configurations of DataTables

 "bPaginate": true, //翻页功能 
"bLengthChange": true, //改变每页显示数据数量 
"bFilter": true, //过滤功能 
"bSort": false, //排序功能 
"bInfo": true,//页脚信息 
"bAutoWidth": true//自动宽度

3. Data sorting

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

4. Hide some columns

##

$(document).ready(function() { 
$('#example').dataTable( { 
"aoColumnDefs": [ 
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] }, 
{ "bVisible": false, "aTargets": [ 3 ] } 
] } ); 
} );

5. Internationalization

$(document).ready(function() { 
$('#example').dataTable( { 
"oLanguage": { 
"sLengthMenu": "每页显示 _MENU_ 条记录", 
"sZeroRecords": "抱歉， 没有找到", 
"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据", 
"sInfoEmpty": "没有数据", 
"sInfoFiltered": "(从 _MAX_ 条数据中检索)", 
"oPaginate": { 
"sFirst": "首页", 
"sPrevious": "前一页", 
"sNext": "后一页", 
"sLast": "尾页" 
}, 
"sZeroRecords": "没有检索到数据", 
"sProcessing": "<img src=&#39;./loading.gif&#39; />" 
} 
} ); 
} );

6. Sorting function:

$(document).ready(function() { 
$('#example').dataTable( { 
"aoColumns": [ 
null, 
{ "asSorting": [ "asc" ] }, 
{ "asSorting": [ "desc", "asc", "asc" ] }, 
{ "asSorting": [ ] }, 
{ "asSorting": [ ] } 
] 
} ); 
} );

7. Data acquisition supports 4 types: as follows

• ##•DOM Document Data

  
  

##•Javascript array js array

• 
  

  ##•Ajax source Ajax request data

• 
  

  •Server side processing Server-side data

The above is the detailed content of What are jQuery datatables? How to use datatables?. For more information, please follow other related articles on the PHP Chinese website!