欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

jQuery datatables是什么?datatables如何使用?

程序员文章站 2022-04-14 12:29:40
...
Datatables简介

DataTables是一个jQuery的表格插件。这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格。主要特点:

  • 自动分页处理

  • 即时表格数据过滤

  • 数据排序以及数据类型自动检测

  • 自动处理列宽度

  • 可通过CSS定制样式

  • 支持隐藏列

  • 易用

  • 可扩展性和灵活性

  • 国际化

  • 动态创建表格

  • 免费的

二、如何使用
在做后台的时候并没有美工和前端工程师来配合你做页面,为了显示数据并有一定的美感,我们可以使用jQuery的DataTables插件来帮助我们完成任务
1、DataTables的默认配置


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

2、DataTables的一些基础属性配置


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

3、数据排序


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

从第0列开始,以第4列倒序排列
4、隐藏某些列


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

5、国际化


$(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='./loading.gif' />" 
} 
} ); 
} );

6、排序功能:


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

7、数据获取支持4种:如下

  • •DOM 文档数据

  • •Javascript array js数组

  • •Ajax source Ajax请求数据

  • •Server side processing 服务器端数据

以上就是jQuery datatables是什么?datatables如何使用?的详细内容,更多请关注其它相关文章!