如何在DataTables插件中添加编辑按钮？

塞布·科拉德

我正在使用DataTables插件在项目中创建一个表，我想在表中添加一个编辑按钮。我使用此演示了解如何制作按钮，但是在我的项目中它不起作用，我也不知道为什么。

我的代码：

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'
        }],
    });
}

N'Bayramberdiyev

您忘记了包含Buttons，Select，Editor和（可选）自适应扩展。

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

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'
        }],
    });
});