Datatables简单的使用

深藏阁楼爱情的钟 2021-09-14 10:02 385阅读 0赞

一.Datatables简介

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

*  自动分页处理
 *  即时表格数据过滤
 *  数据排序以及数据类型自动检测
 *  自动处理列宽度
 *  可通过CSS定制样式
 *  支持隐藏列
 *  易用
 *  可扩展性和灵活性
 *  国际化
 *  动态创建表格
 *  免费的

DataTables的官网是：[http://www.datatables.net/][http_www.datatables.net]   中文网:[http://datatables.club/][http_datatables.club]

二.简单的使用

1.简单的列子

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0"> <title>基础</title> <link rel="stylesheet" type="text/css" href="../jquery.dataTables.min.css"> </head> <body> <table id="basic_example" class="display"> <thead> <tr> <th>学号</th> <th>性别</th> <th>班级</th> <th>名称</th> <th>身份证</th> <th>兴趣</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>女</td> <td>初一（一）班</td> <td>小屋</td> <td>100001</td> <td>看书</td> </tr> <tr> <td>002</td> <td>男</td> <td>初一（4）班</td> <td>小丫</td> <td>100002</td> <td>唱歌</td> </tr> <tr> <td>003</td> <td>女</td> <td>初一（一）班</td> <td>肖霞</td> <td>100003</td> <td>看书</td> </tr> <tr> <td>004</td> <td>男</td> <td>初一（4）班</td> <td>默默</td> <td>100004</td> <td>唱歌</td> </tr> </tbody> </table> <script type="text/javascript" charset="utf8" src="../jquery.js"></script> <script type="text/javascript" charset="utf8" src="../jquery.dataTables.js"></script> <script type="text/javascript" charset="utf8" class="init"> $(document).ready(function() { $('#basic_example').dataTable(); } ); </script> </body> </html>

![20171122212306165][]

2.使用常用配置选项：[查看选项][Link 1]

$('#basic_example').dataTable({ //paging: false,//分页关闭 默认是打开的 // scrollY: 400,//y轴启动滚动条 // scrollX: 800,//x轴启动滚动条 autoWidth:false,不开启自动宽度，用bootstrap的自适应去调整 "lengthMenu": [//表格行数选择框内数目，第一个数组代表value，第二个数组代表key [2, 4, 20, 50, -1], [2, 4, 20, 50, "All"] ], "info": true,//页脚信息 "sort": true, //排序功能 "displayLength": 2,//默认的显示行数 (也就是每页显示几条数据) "language": {//自定义语言提示 "lengthMenu": "每页 _MENU_ 条记录","zeroRecords": "没有检索到数据", //搜索，没找到内容时 "paginate": { "previous": "上一页", "next": "下一页" }, "info" : "从 _START_ 到 _END_ 条，总记录为 _TOTAL_ 条", "infoEmpty" : "记录数为0", "search":"搜索：" } });

![20171122213706757][]

[http_www.datatables.net]: http://www.datatables.net/
[http_datatables.club]: http://datatables.club/
[20171122212306165]: /images/20210813/dfa38fff30324facb0fe33663d59bd34.png
[Link 1]: http://datatables.club/reference/option/
[20171122213706757]: /images/20210813/37e96b28e3b44ee981476b67a8345458.png