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

前端模块化

2019
#前端知识