jQuery DataTables - 从数组中删除和拼接数据答案

【问题标题】：jQuery DataTables - Remove from and splice data from arrayjQuery DataTables - 从数组中删除和拼接数据
【发布时间】：2018-02-06 11:41:32
【问题描述】：

我正在尝试在删除所选行时从项目列表中删除记录及其数据数组。

我可以从表中删除行并重新绘制它，但是当我将表的数据注销到控制台时，它仍然包含被删除的对象，并且文档似乎没有任何关于拼接选定行的内容数据，只有在 jquery 中手动指定的行索引。

表初始化

var itemsTable = $('table#invoiceItemsTable').DataTable({
    data: invoiceItems,
    responsive: true,
    order: [],
    columns: [{
            data: 'Description',
            title: 'Description',
            width: '25%',
            className: 'dt-head-left dt-body-left'
        },
        {
            data: 'NominalId',
            title: 'Nominal Code',
            width: '15%',
            className: 'dt-left'
        },
        {
            data: 'Quantity',
            render: function(data) {
                return $.addCommas(data).replace('.00', '');
            },
            title: 'Quantity',
            width: '10%',
            className: 'dt-right'
        },
        {
            data: 'UnitPrice.BaseValue',
            render: function(data) {
                return '£' + $.addCommas(data);
            },
            title: 'Unit Price',
            width: '10%',
            className: 'dt-right'
        },
        {
            data: 'TaxCodeName',
            title: 'Tax Code',
            width: '15%',
            className: 'dt-head-left dt-body-left'
        },
        {
            data: 'Tax.BaseValue',
            render: function(data) {
                return '£' + $.addCommas(data);
            },
            title: 'Tax',
            width: '10%',
            className: 'dt-right'
        },
        {
            data: 'Subtotal.BaseValue',
            render: function(data) {
                return '£' + $.addCommas(data);
            },
            title: 'Subtotal',
            width: '15%',
            className: 'dt-right'
        }
    ]
})

行删除处理程序

$('#deleteInvoiceItems').on('click', function() {
    console.log('----------------------------');

    var selectedRows = itemsTable.rows('.selected').indexes();
    console.log('Selected rows:');
    console.log(selectedRows);

    var data = itemsTable.data();

    itemsTable.rows(selectedRows).remove().draw();

    console.log('itemsTable.data(): ' );
    console.log(data);

    $(this).hide();

    if (!invoiceItems.length) {
        $('#saveInvoice').hide();
    }

    console.log('invoiceItems');
    console.log(invoiceItems);

    calcInvoiceTotals();
})

【问题讨论】：

确实很奇怪，你的代码实际上会删除选定的行。顺便说一句，它是哪个版本的数据表？你能创建一个 plnkr 吗？
你可以试试itemsTable.row('.selected').remove().draw();
我刚刚尝试过，但没有任何区别。我在这里做了一个 jsfiddle：jsfiddle.net/s3o7tc4x.
Datatables 将其数据保存在自己的数据结构中。 Datatables 不会更新您的 invoiceItems 数组。如果需要，这是您需要做的事情。或者，如果您想从 Datatables 中获取当前数组，您可以使用如下内容：itemsTable.rows().data().toArray()。参考toArray() 文档。
猜我很困惑。当您说“数据未更新”时，您指的是变量invoiceItems 吗？我将您的fiddle 分叉并在您的下方添加了一个console.log 输出，显示删除后保留在表中的数据。从数据表的角度来看，一切正常。即使您使用invoiceItems 将数据加载到数据表中，它也不知道要更新它的变量。

标签： jquery arrays datatable datatables

【解决方案1】：

按照 K Thorngren 的建议，使用 itemsTable.rows().data().toArray() 注销数据似乎是在删除项目后获取剩余表数据的正确方法。

仅使用 itemsTable.data() 会返回所有项目，包括已删除的项目，即使它们不再存在于表中。

【讨论】：

【解决方案2】：

你需要用数组重绘表格。

var table= $([ SELECTOR FOR YOUR TABLE]).DataTable()
var table= $([ SELECTOR FOR YOUR TABLE]).dataTable() /* ONLY FOR LEGACY DATATABLES */

table.clear().draw();
table.rows.add(array);
table.columns.adjust().draw();

这应该可以解决你的问题。

【讨论】：