在jquery数据表中动态添加和删除行答案

【问题标题】：Dynamically adding and deleting rows in jquery datatable在jquery数据表中动态添加和删除行
【发布时间】：2016-02-07 05:47:39
【问题描述】：

在 jquery 数据表中，我在单击按钮时动态添加行。但是在添加新行时，如果表中存在类似的行，它应该自动删除。

假设在数据表中我有以下数据。

第 1 行：A B C D 第 2 行：P Q R S 第3行：U V W X

现在我要添加一个新的，如下所示。

第 4 行：P Q R S

但是这个新的已经存在于数据表中，所以这个现有的应该在添加这个新的时自动删除。您可能会想为什么我们需要再次添加相同的。因为，虽然在表中看起来一样，但在数据库中却不同。

谁能帮我实现这个要求。

【问题讨论】：

你有什么尝试吗？可以加个jsfiddle吗？

标签： jquery datatables datatables-1.10

【解决方案1】：

$(document).ready(function () {
    $('#add-new-button').on('click',function(){
        var rData = [
            test1,
            test1,
            '<a href="#" data-href="' + response.result[0].id + '" class="update">Update</a>',
            '<a href="#" data-href="' + response.result[0].id + '" class="delete">Delete</a>'
        ];
         $('#dataTable').DataTable().row.add(rData).draw(false);
    });

   $('#dataTable').on('click', '.update', function () {
        var pageParamTable = $('#dataTable').DataTable();
        var tableRow = pageParamTable.row($(this).parents('tr'));
        var rData = [
            test1,
            test1,
            '<a href="#" data-href="' + response.result[0].id + '" class="update">Update</a>',
            '<a href="#" data-href="' + response.result[0].id + '" class="delete">Delete</a>'
        ];
        pageParamTable
                .row( tableRow )
                .data(rData)
                .draw();
    });
    $('#dataTable').on('click', '.delete', function () {
       var pageParamTable = $('#page-params').DataTable();
        var tableRow = pageParamTable.row($(this).parents('tr'));
        pageParamTable.row( tableRow ).remove().draw();
    });
});

我在我们的项目中使用此代码，您可以使用它

【讨论】：

【解决方案2】：

这是一个有效的fiddle 动态添加行，如果在添加之前已经存在，则将其删除。

HTML

<!-- INDEX TO ADD ON THE DATATABLE -->
<select id="recIndex">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
</select>
<!-- BUTTON TO ADD ROW -->
<input type="button" name="addRow" value="Add Row">

<!-- DATATABLE -->
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>No #</th>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
                <th>Column 5</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <th>No #</th>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
                <th>Column 5</th>
            </tr>
        </tfoot>
    </table>

在下面的代码中，我通过检查每行的第一个 TD 值来检查 DataTable 中是否存在记录。如果提供的索引计数器值在第一个 TD 中，那么我假设它已经存在。然后我添加一个.remove 类来删除该行。希望你明白我的意思。

$(document).ready(function() {
    var $myTable = $('#example');
    var t = $myTable.DataTable();

    $('input[name="addRow"]').click(function() {
        var index = $('#recIndex').val();
        addRow(index);
    });

    function addRow(counter) {
        // Check if the counter record is already exist in DataTable
        // TODO: Check and provide functionality as per your requirements. Below code is done just for an example. 
        $myTable.find('tr').each(function() {
            if($(this).find('td:first').html() == counter) {
                $(this).addClass('remove'); // If you found the counter add .remove class
            }
        });

        // Delete row by using remove class and draw
        t.row('.remove').remove().draw( false );

        // Add new row as per index counter
        t.row.add( [
            counter,
            counter +'.1',
            counter +'.2',
            counter +'.3',
            counter +'.4',
            counter +'.5'
        ] ).draw( false );
    }
} );

【讨论】：