如何在 DataTables 插件中添加編輯按鈕？

Question

我正在使用 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'
        }],
    });
}

Answer 1

您忘記包含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'
        }],
    });
});

除了利用 Bootstrap 樣式，Editor Bootstrap 集成還提供了一個顯示控制器，它使用 Bootstrap 模態控件與 Bootstrap 完全集成。

所以，我也包含了Bootstrap庫。

Answer 2

你去吧；

JSFiddle ，您必須導入資源菜單上的所有庫，並注意 jQuery 版本。 那是你的小提琴的問題。

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

如何在 DataTables 插件中添加編輯按鈕？

問題描述

2 個解決方案

解決方案1
4 已采納 2019-08-02 08:47:18

解決方案2
0 2019-08-02 08:40:28

如何在 DataTables 插件中添加編輯按鈕？

問題描述

2 個解決方案

解決方案1 4 已采納 2019-08-02 08:47:18

解決方案2 0 2019-08-02 08:40:28

解決方案1
4 已采納 2019-08-02 08:47:18

解決方案2
0 2019-08-02 08:40:28