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": "" } } ); } );

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!