# DataTablesEasy 轻松实现数据表格

二次封装dataTables，轻松使用。前台：Github

对应后台参考：Github

# 创建数据表格 createDataTable

# 简单示例：

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/datatables.min.css" rel="stylesheet">
    <link href="css/select.dataTables.min.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/toastr.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div id="wrapper">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="table-responsive">
                        <table id="table" class="table table-striped table-bordered table-hover dataTables-example" >
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/toastr.min.js"></script>
<script src="js/datatables.min.js"></script>
<script src="js/dataTables.select.min.js"></script>
<script src="js/dataTablesEasy.js"></script>
<script src="js/index.js"></script>
</body>
</html>

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

js:

let id = 'table';
let listUrl = 'https://www.easy-mock.com/mock/5d3fed7b8b554b4f4a4d0368/dataTables/list';
let editUrl = 'https://www.easy-mock.com/mock/5d3fed7b8b554b4f4a4d0368/dataTables/success';
let deleteUrl = 'https://www.easy-mock.com/mock/5d3fed7b8b554b4f4a4d0368/dataTables/success';
let addUrl = 'https://www.easy-mock.com/mock/5d3fed7b8b554b4f4a4d0368/dataTables/success';
let columns = [
    { data: 'id' , editable: false, searchable: true,
        render: ( data, type, row ) => {
            return data +' ('+ row['remark']+')';
        }},
    { data: 'username', searchable: true},
    { data: 'gender' , searchable: true, radioList: [{name: '男',value: 'man'},{name: '女',value: 'woman'}]},
    { data: 'remark', selectList: [{name: '备注1',value: '1'},{name: '备注2',value: '2'}]}
];
let buttonList = ['copy','csv', 'excel', 'pdf', 'print'];

createDataTable(id, listUrl, columns, addUrl, editUrl, deleteUrl, buttonList);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 参数说明

# id （必须）

表格id，table标签的id。
格式：id 字符串
示例：'table'

# listUrl （必须）

数据表格获取数据的URL，条件查询也是这个URL，请在后台实现分页和条件查询。
格式：URL 字符串
示例：'https://www.easy-mock.com/mock/5d3fed7b8b554b4f4a4d0368/dataTables/list'

# columns （必须）

跟表格获取的数据对应的列名，表头。
格式：数组中是 column 对象，对象的 data 属性是列名，还有一些其他可选参数。
示例：

let columns = [
    { data: 'id' , editable: false, searchable: true,
        render: ( data, type, row ) => {
            return data +' ('+ row['remark']+')';
        }},
    { data: 'username', searchable: true },
    { data: 'gender' , searchable: true, selectList: [{name: '男',value: '男'},{name: '女',value: '女'}]},
    { data: 'remark'}
]

1
2
3
4
5
6
7
8
9

# columns 的可选参数

# editable （columns可选）

是否开启此列双击编辑功能，默认开启，但需要 editUrl，如果没有 editUrl 此项不生效。

# searchable （columns可选）

是否开启此列搜索功能，默认关闭。如果开启，将在表头上方自动生成搜索框，实现搜索功能。

# selectList （columns可选）

只在开启双击编辑功能时生效，如果编辑的项是下拉选择框，在这个参数内输入待选项的 name 和 value，此参数有值则认为此列为下拉选择框，同时会影响到添加功能。示例：[{name: '备注1',value: '1'},{name: '备注2',value: '2'}]

# radioList （columns可选）

只在开启双击编辑功能时生效，如果编辑的项是下拉选择框，在这个参数内输入待选项的 name 和 value，此参数有值则认为此列为单选框，同时会影响到添加功能。示例：[{name: '男',value: '男'},{name: '女',value: '女'}]

# render （columns可选）

函数参数，用于自定义列内容。当你开启 select 或 radio 时，render将自动实现。
示例：

render: (data, type, row) => {
    return data +' ('+ row['remark']+')';
}

1
2
3

# addUrl （可选）

添加数据的接口，如果此项有值，则在最上方显示添加按钮，并实现添加功能。

# editUrl （可选）

修改数据的接口，被双击编辑功能依赖，如果此项没有值，则编辑功能不可用。

# deleteUrl （可选）

删除数据的接口，如果此项有值，则在最上方显示删除按钮，并实现删除功能。

此处删除功能的实现为，点击需要删除的行，然后点击删除按钮，将会执行删除功能。

# buttonList （可选）

功能按钮列表，在最上方添加内置功能按钮。
格式：字符串数组
示例：

let buttonList = ['copy','csv', 'excel', 'pdf', 'print']

# 内置按钮说明

# copy

复制数据表格内容到剪贴板。

# csv

导出 csv 表格文件。

# excel

导出 excel 表格文件。

# pdf

导出 pdf 格式文件。

# print

调起浏览器打印功能。

# 数据传输格式说明

# listUrl 接口

方法：get

# 接收数据

示例：

{   "recordsTotal":50,
    "recordsFiltered":50,
    "data":[{"id":1,"username":"Barbara Walker","gender":"男","remark":"1JE"},{"id":2,"username":"Karen Taylor","gender":"男","remark":"qOMMD"},{"id":3,"username":"Donna Allen","gender":"男","remark":"ar!eP[A"},{"id":4,"username":"Maria Robinson","gender":"男","remark":"bZmspF"},{"id":5,"username":"Richard Young","gender":"男","remark":"!V&gmhW"},{"id":6,"username":"Richard Martinez","gender":"女","remark":"Bvw6"},{"id":7,"username":"Helen Davis","gender":"女","remark":"&j7$E"},{"id":8,"username":"Ruth Rodriguez","gender":"女","remark":"UGv("},{"id":9,"username":"Kenneth Brown","gender":"女","remark":"RTF"},{"id":10,"username":"Susan Robinson","gender":"女","remark":"]6u(7@"}],
    "draw":"1"}

1
2
3
4

说明：

recordsTotal：记录总条数。
recordsFiltered：经过条件查询后的总条数。
data：显示在表格中的数据。
draw：表明这是第几次查询，防止网络原因导致数据错误。

# 上传数据

示例：

draw: 1
columns[0][data]: id
columns[0][name]: 
columns[0][searchable]: true
columns[0][orderable]: true
columns[0][search][value]: 
columns[0][search][regex]: false
columns[1][data]: username
columns[1][name]: 
columns[1][searchable]: true
columns[1][orderable]: true
columns[1][search][value]: 
columns[1][search][regex]: false
columns[2][data]: gender
columns[2][name]: 
columns[2][searchable]: true
columns[2][orderable]: true
columns[2][search][value]: 
columns[2][search][regex]: false
columns[3][data]: remark
columns[3][name]: 
columns[3][searchable]: true
columns[3][orderable]: true
columns[3][search][value]: 
columns[3][search][regex]: false
order[0][column]: 0
order[0][dir]: asc
start: 0
length: 10
search[value]: 
search[regex]: false

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

说明：

draw：表明这是第几次查询，防止网络原因导致数据错误。
columns：条件查询数组。
start：开始条数。
length：每页几条。
search：查询所有数据。

# addUrl 接口

方法：post

# 上传数据

按照column上传

示例：

id: 1
username:  Joseph Harris123
gender: 男
remark: 备注

1
2
3
4

# editUrl 接口

方法：put

# 上传数据

按照修改的column上传，并上传要修改的 id

示例：

id: 1
username: Joseph Harris123

1
2

# deleteUrl 接口

方法：delete

# 上传数据

上传要删除的 id 数组

示例：

id[]: 2
id[]: 3

1
2

← 目录