What are jQuery datatables? How to use datatables?

伊谢尔伦
Release: 2017-07-22 09:15:05
Original
1688 people have browsed it

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(); } );
Copy after login

2. Some basic property configurations of DataTables


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

3. Data sorting


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

Start from column 0 and sort in reverse order from column 4


4. Hide some columns

##

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

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

6. Sorting function:

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

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!