DataTables

简介

  • Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。

  • 分页,即时搜索和排序

  • 几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理

  • 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation

  • 各式各样的扩展: Editor, TableTools, FixedColumns ……

  • 丰富多样的option和强大的API

  • 支持国际化

  • 超过2900+个单元测试

  • 官网:**DataTables**

  • 导入CDN链接

    1
    2
    <link href="https://cdn.bootcss.com/datatables/1.10.19/css/dataTables.bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/datatables/1.10.19/js/dataTables.bootstrap.js"></script>

表格布局

1
2
3
4
5
6
7
8
9
10
11
12
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>用户id</th>
<th>用户名字</th>
<th>用户角色</th>
<th style="width:155px">操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

向后端发ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$('#example1').DataTable({
"发起ajax请求到后台取数据"
"ajax": "/02mavenWeb/uinfo/selectAll",
"设置显示的条数"
"aLengthMenu": [3,5,7],
"默认显示的条数"
'iDisplayLength':3,
"自动宽度"
"autoWidth": false,
"destroy": true,
"返回的json自动解析,必须格式是 data:[数据1:xx,数据2:xx]"
"columns": [
{ "data": "uid" },
{ "data": "uname" },
{ "data": "cname" },
"给不需要传数据的标签设置默认值"
{"defaultContent":'<button id="uploadCinfo" class="btn btn-info btn-sm" data-toggle="modal" data-target="#modal1"><i class="fas fa-pencil-alt"></i>修改</button><button id="delCinfo" class="btn btn-danger btn-sm" style="float:right;"><i class="fas fa-trash"></i>删除</button>'}
]
});

获取当前行数据

1
2
var table = $('#example1').DataTable({"ajax": "/02mavenWeb/uinfo/selectAll"})
table.row($(this).closest('tr')).data();

重载表格

1
table.ajax.reload( null, false );

获取所有ajax返回数据

1
table.ajax.json().datas;

后端分页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
用一个变量接收,用户下面获取单行数据
table = $('#mytable').DataTable({
language: lang, 提示信息
autoWidth: false, 自动宽度
destroy: true,
processing: true, 隐藏加载提示,自行处理
serverSide: true, 启用服务器端分页
aLengthMenu: [5, 7, 10], 设置显示的条
iDisplayLength: 5, 默认显示的条数
ordering: false, 取消默认排序查询,否则复选框一列会出现小箭头
searching: false,
分页样式
pagingType: "simple_numbers",
stateSave: false,
设置自动序号
fnDrawCallback: function () {
设置序号列
var api = this.api();
获取到本页开始的条数
var startIndex = api.context[0]._iDisplayStart;
api.column(0).nodes().each(function (cell, i) {
cell.innerHTML = startIndex + i + 1;
});
},
发起ajax请求到后台取数据
"ajax": function (data, callback, settings) {
$.get("<%=request.getContextPath()%>/comm/" + urlData, {
需要往后台传递的参数写在这里,JSON格式
"pageNum": (data.start / data.length) + 1,
"pageSize": data.length,
"brandName": data.search.value,
实现同步加载,只有table加载完成后才能获取后面的数据
async:false,
}, function (data) {
var returnData = {};
if (data.total !== undefined) {
返回数据全部记录
returnData.recordsTotal = data.total;
后台不实现过滤功能,每次查询均视作全部结果
returnData.recordsFiltered = data.total;
需要显示的数据信息
returnData.data = data.list;
} else {
returnData.recordsTotal = 0;
returnData.recordsFiltered = 0;
returnData.data = [];
}
callback(returnData);
})

},
自定义宽度
"columnDefs": [
{},
{},
{},
{},
{},
{"width": "15%", "targets": 6}
],
"columns": [
{"data": null},
{"data": "commName"},
{"data": "commTypeInfo.typeName"},
{"data": "commBrandInfo.brandName"},
{"data": "proModel"},
{"data": "commColor"},
{"defaultContent": '' }
]
});

设置复选框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

"columnDefs": [
{
指定第一列,从0开始,0表示第一列,1表示第二列……
targets: 0,
render: function (data, type, row, meta) {
return '<input type="checkbox" name="checklist" value="' + row.id + '" />'
}
},
设置第一列和最后一列不可排序
{"orderable": false, "targets": [0, -1]},
{
"defaultContent": "",
"targets": "_all"
}
],
"columns": [
{
data: null,
className: "text-center",
title: "<input type='checkbox' name='checklist' id='checkall'/>"
},


实现全选功能
$("#mytable").on('click', "#checkall", function () {
$("input[name='checklist']").prop("checked", $(this).prop("checked"));
});

获取选中的复选框,排除复选框#checkall
var checked = $("table input[type=checkbox]:checked:not('#checkall')");
checked.each(function () {
获取选中行数据
var data = table.row($(this).closest('tr')).data();
})

相关文章

JavaScript基础

JavaScript高级

Jquery基础

Jquery高级

Bootstrap

Ajax和Json

Sweetalert2

zTree使用

Vue

前端模块化