目录
一、下载并引入文件
1. 下载 js 文件 & css 文件
js 文件：jquery.dataTables.min.js、jquery-3.1.1.min.js
css 文件：jquery.dataTables.min.css
2. 文件存放
static 文件夹中，js 文件放在 js 文件夹中，css 文件放在 css 文件夹中。
3. 引入位置
（1）在base.html 中引入
（2） jquery-3.1.1.min.js 放在 jquery.dataTables.min.js 前面
（3）引入内容：
<head>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'css/jquery.dataTables.min.css' %}" />
<!-- JQuery -->
<script type="text/javascript" src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
<!-- DataTables JS -->
<script type="text/javascript" src="{% static 'js/jquery.dataTables.min.js' %}"></script>
</head>二、 使用
1. html 中
<table id="id_tb">
<thead>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
</thead>
<tbody>
<tr>
<td>第1行的单元格值1</td>
<td>第1行的单元格值2</td>
<td>第1行的单元格值3</td>
</tr>
<tr>
<td>第2行的单元格值1</td>
<td>第2行的单元格值2</td>
<td>第2行的单元格值3</td>
</tr>
</tbody>
</table>2. js 中(基础设置)
$(document).ready( function () {
var obj = { // 表格的基本设定
"bPaginate": false, // 翻页
"bLengthChange": false, // 改变分页页数（改变每页显示记录笔数）
"bInfo": false, // 页脚信息
"bFilter": false, // 关键字搜索
"bSort": true, // 每个字段的排序
// 'iDisplayLength':10 // 初始化时，每页显示记录笔数
// "pagingType": "full_numbers", // 分页按钮显示选项（首页和最后一页）
// "sScrollY": '300px', // 是否开启垂直滚动，以及设置滚动区域
// 'iScrollLoadGap': 10 // 当DataTable为滚动时，一屏最多显示记录笔数
"fixedHeader": true, // 固定表头(1)--固定表头
"scrollY": "400px", // 固定表头(2)--超过表格高度，Y轴滚动
"scrollX": true, // 固定表头(4)--宽度超长，X轴滚动
"scrollCollapse": true, // 固定表头(3)
};
var my_tb = $('#id_tb').DataTable(obj); // 表格的初始化
my_tb.clear().draw(); // 清空表格
} );3. css 中(设置隐藏滚动条)
<style>
div:not(.dataTables_scrollFoot)::-webkit-scrollbar {
display: none;
}
</style> 三、实际应用
（一）基础操作
1. 前提：初始化
（1）html 中
<table id="id_tb">
<thead>
<tr>{% for c in cols %}
<th>{{ c }}</th>
{% endfor %}<tr>
</thead>
</table>（2）js 中
var my_tb = $('#id_tb').DataTable(obj); // 初始化table2. 功能操作
（1）自定义给 table 的某列增加class类名
// 给table的第2列、第3列增加click_cell类名
$('#id_tb > tbody > tr > td:nth-child(2)').css('color','#2f587b').addClass('click_cell');
$('#id_tb > tbody > tr > td:nth-child(3)').css('color','#2f587b').addClass('click_cell');（2）获取当前单元格所在的列index
// 点击单元格，获取当前单元格所在的列index
// 点击了"类名是click_cell的单元格"，触发了点击事件
$("#id_tb > tbody").on('click','.click_cell',function(e){
let idx = $(this).index() // 第几列
})（3）获取当前单元格所在的表head（title）
// 点击单元格，获取当前单元格所在列对应的表 Head
$("#id_tb > tbody").on('click','.click_cell',function(e){
let titleval=my_tb.columns().context[0].aoColumns[$(this).index()].sTitle;
})（4）获取当前单元格所在的行的值（阵列形式）
// 点击单元格，获取当前单元格所在行的所有值（阵列）
$("#id_tb > tbody").on('click','.click_cell',function(e){
let trval=my_tb.row($(this).parent()).data();
})（5）点击单元格时，获取当前单元格的值
$("#id_tb > tbody").on('click','.click_cell',function(e){
let tdval=my_tb.cell(this).data()
})（6）点击表格中每行的第一个单元格
$("#id_tb > tbody").on('click', 'td:nth-child(1)',function(e){
let tdval=my_tb.cell(this).data()
})二、table的其他相关操作
参考另一篇文章：Frontend - DOM 元素操作（Select、CheckBox、Radio、Table）-CSDN博客
1898
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
