datatables快速入门

官网

进入官网https://datatables.net/
点击下载
在这里插入图片描述
支持多种方式下载

快速入门

这里以cdn的方式演示
https://cdn.datatables.net/

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快速入门</title><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.1.8/css/dataTables.dataTables.min.css"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><script src="https://cdn.datatables.net/2.1.8/js/dataTables.min.js"></script>
</head><body><table id="myTable"><thead><tr><th>第一列</th><th>第二列</th></tr></thead><tbody><tr><td>第一行第一列</td><td>第一行第二列</td></tr><tr><td>第二行第一列</td><td>第二行第二列</td></tr></tbody></table><script>$(document).ready(function () {$('#myTable').DataTable();});</script>
</body></html>

在这里插入图片描述

数据

处理模式

客户端处理

客户端处理是 DataTables 的默认运行模式，因为它易于使用，且无需编写额外代码。在客户端处理模式下，表格中数据的排序、搜索、分页以及 DataTables 执行的所有其他数据处理操作都由 DataTables 本身在浏览器中完成。

服务端处理

当需要在表格中显示大量数据（例如数百万行）时，服务器端处理就会发挥作用。在这种情况下，将数据发送到客户端，然后由 Javascript 对数据进行处理，会产生明显的开销，并可能导致最终应用程序性能低下。在服务器端处理模式下，数据的所有排序、搜索等操作都交由服务器进行，服务器可以利用可用的数据库引擎，这些引擎正是为此类操作而高度调整的。每一页数据（在 DataTables 术语中称为绘制）都需要向服务器发出 Ajax 请求。虽然每个 Ajax 请求可能需要几分之一秒的时间才能完成，但这种方法可能比所有数据加载时的大量等待要好。

数据类型

数组

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快速入门</title><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.1.8/css/dataTables.dataTables.min.css"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><script src="https://cdn.datatables.net/2.1.8/js/dataTables.min.js"></script>
</head><body><table id="myTable"><thead><tr><th>Name</th><th>Position</th><th>Etn</th><th>Office</th><th>Start date</th><th>Salary</th></tr></thead></table><script>var data = [["Tiger Nixon","System Architect","Edinburgh","5421","2011/04/25","$3,120"],["Garrett Winters","Director","Edinburgh","8422","2011/07/25","$5,300"]]$(document).ready(function () {$('#myTable').DataTable({data: data,response});});</script>
</body></html>

在这里插入图片描述

对象

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快速入门</title><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.1.8/css/dataTables.dataTables.min.css"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><script src="https://cdn.datatables.net/2.1.8/js/dataTables.min.js"></script>
</head><body><table id="myTable"><thead><tr><th>Name</th><th>Position</th><th>Salary</th><th>Office</th></tr></thead></table><script>var data = [{"name": "Tiger Nixon","position": "System Architect","salary": "$3,120","start_date": "2011/04/25","office": "Edinburgh","extn": "5421"},{"name": "Garrett Winters","position": "Director","salary": "$5,300","start_date": "2011/07/25","office": "Edinburgh","extn": "8422"}]$(document).ready(function () {$('#myTable').DataTable({data: data,columns: [{ data: 'name' },{ data: 'position' },{ data: 'salary' },{ data: 'office' }]});});</script>
</body></html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快速入门</title><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.1.8/css/dataTables.dataTables.min.css"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><script src="https://cdn.datatables.net/2.1.8/js/dataTables.min.js"></script>
</head><body><table id="myTable"><thead><tr><th>Name</th><th>Position</th><th>Salary</th><th>Office</th></tr></thead></table><script>function Employee(name, position, salary, office) {this.name = name;this.position = position;this.salary = salary;this._office = office;this.office = function () {return this._office;}};$(document).ready(function () {$('#myTable').DataTable({data: [new Employee("Tiger Nixon", "System Architect", "$3,120", "Edinburgh"),new Employee("Garrett Winters", "Director", "$5,300", "Edinburgh")],columns: [{ data: 'name' },{ data: 'position' },{ data: 'salary' },{ data: 'office' }]});});</script>
</body></html>

在这里插入图片描述
是不是觉得上面自带的样式有些丑，可以通过配置隐藏

$(document).ready(function () {$('#myTable').DataTable({data: [new Employee("Tiger Nixon", "System Architect", "$3,120", "Edinburgh"),new Employee("Garrett Winters", "Director", "$5,300", "Edinburgh")],columns: [{ data: 'name' },{ data: 'position' },{ data: 'salary' },{ data: 'office' }],paging: false,searching: false,ordering: false,});
});