gpt4 book ai didi

javascript - 如何在 DataTables 插件中添加编辑按钮?

转载 作者:行者123 更新时间:2023-11-29 18:40:40 26 4
gpt4 key购买 nike

我正在使用 DataTables 插件在我的项目中创建一个表格,我想在我的表格中添加一个编辑按钮。我用这个demo知道如何制作按钮,但在我的项目中它不起作用,我也不知道为什么。

我的代码:

function make_table(data_table) {
var data_use = get_data_table(data_table);
var column_name = [{
title: name_layer
}, {
title: $.S.trans.SHAR.title_table2
}, {
title: $.S.trans.SHAR.title_table3
}, {
title: $.S.trans.SHAR.title_table1
}];
$('#datatable').dataTable({
"sPaginationType" : "full_numbers",
data : data_use,
columns : column_name,
dom : 'Bfrtip',
select : 'single',
responsive : true,
altEditor : true,
destroy : true,
searching: false,
buttons : [{
extend : 'selected',
text : 'Edit',
name : 'edit'
}],
});
}

最佳答案

您忘记包含 Buttons , Select , Editor和(可选)Responsive扩展名。

Here是一个基于您的代码的简单工作示例。

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Datatables</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<link rel="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css">
<link rel="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css">
<link rel="https://cdn.datatables.net/responsive/2.0.2/css/responsive.dataTables.min.css">
</head>
<body>
<div id="datatablecontainer">
<table class="dataTable" id="datatable"></table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.0.2/js/dataTables.responsive.min.js"></script>
<script src="http://kingkode.com/datatables.editor.lite/js/altEditor/dataTables.altEditor.free.js"></script>
</body>
</html>

JS:

$(document).ready(function() {
var data_use = [
["Garrett Winters", "Accountant", "Tokyo", "8422"],
["Ashton Cox", "Junior Technical Author", "San Francisco", "1562"],
["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224"],
["Airi Satou", "Accountant", "Tokyo", "5407"],
];

var column_name = [{
title: "table_1"
}, {
title: "table2"
}, {
title: "table3"
}, {
title: "table4"
}];

$('#datatable').DataTable({
"sPaginationType" : "full_numbers",
data : data_use,
columns : column_name,
dom : 'Bfrtip',
select : 'single',
responsive : true,
altEditor : true,
//destroy : true,
searching: false,
buttons : [{
extend : 'selected',
text : 'Edit',
name : 'edit'
}],
});
});

As well as making use of the Bootstrap styles, the Editor Bootstrap integration also provides a display controller which uses the Bootstrap modal control to fully integrate with Bootstrap.

所以,我包括了Bootstrap图书馆也是。

关于javascript - 如何在 DataTables 插件中添加编辑按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57321196/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com