Question

当删除所选行时，我试图从项目列表及其数据数组中删除记录。

我可以从表中删除行并重绘它，但是当我将表的数据注销到控制台时，它仍然包含已删除的对象，并且文档似乎没有有关拼接所选行数据的任何内容，只有在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();
})

Answer 1

使用itemsTable.rows().data().toArray()注销数据看起来是在删除项目后获取剩余表格数据的正确方法，正如K Thorngren所建议的那样。

仅使用itemsTable.data()会返回包括已删除项目在内的所有项目，即使这些项目不再出现在表格中也是如此。

Answer 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();

那应该可以解决您的问题。

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

2 个答案: