在数据表中启用编辑/删除

Question

我有一个以 Cloud Firestore 作为后端的 Web 应用程序。我使用DataTable从cloud firestore导出数据并显示在网页上，表格如下： Table

从 Cloud Firestore 加载“订单”集合并附加到 DataTables 的代码是：

var dataTable;

db.collection("orders").orderBy('timestamp', 'desc')
    .get()
    .then(function (querySnapshot) {
        if (querySnapshot.size) {
            var firestore_source = [];
            querySnapshot.forEach(function (data) {
                var obj = data.data();
                obj.id = data.id;
                firestore_source.push(obj);
            });
            //console.log('data:', firestore_source);
            dataTable.clear();
            dataTable.rows.add(firestore_source);
            dataTable.order([0, 'desc']).draw();
        }
    })
    .catch(function (error) {
        console.log("Error getting documents: ", error);
    });


$(document).ready(function () {
    dataTable = $('#example').DataTable({
        columns: [
            { data: 'Name' },
            { data: "Date" },
            { data: "Ins" },
            { data: "Phone" },
            { data: "Item" },
            { data: "Price"},
            { data: "Commision"},
            { data: "Revenue"},
            {
                data: null,
                className: "center",
                defaultContent: '<a href="" class="editor_edit">Edit</a> / <a href="" class="editor_remove">Delete</a>'
            }
        ],
        "columnDefs": [
            {"className": "dt-center", "targets": "_all"}
          ],
    });

    
    $('#example').on('click', 'a.editor_remove', function (e) {
        e.preventDefault();
        console.log("delete clicked");
        console.log($(this).closest('tr'));
         
         // what I should do here?

    } );
});

HTML 中的数据表：

        <table id="example" class="table table-striped table-bordered" style="width:100%">
            <thead>
                <tr>
                    <th>Customer</th>
                    <th>Order Date</th>
                    <th>Instagram</th>
                    <th>Phone</th>
                    <th>Item</th>
                    <th>Price $</th>
                    <th>Commission</th>
                    <th>Earnings $</th>
                    <th>Edit / Delete</th> 
                </tr>
            </thead>

        </table>

目前，“订单”集合中的整个数据都已加载，显然没有编辑和删除每行数据等功能。 所以，我被困在这里，我不知道单击该行上的编辑/删除按钮时如何识别表中的每一行，以便我可以将其用作查询云 Firestore 的参数？

我看到有内置工具Editor，但我正在寻找本地方法。

Answer 1

关于datatable API，您可以通过此代码获取点击/选定行的数据，这意味着您可以获得身份来编辑或删除选定的行。

$('#example tbody').on('click', 'a.editor_remove', function () {
    let row = dataTable.api().row($(this).closest("tr")).data();
    console.log(row);
});