jQuery Datatable中动态添加和删除行

Question

在jquery datatable中，我点击一个按钮时会动态地添加行。但是如果表格中已经存在相似的行，则添加新行时应该自动删除它。

假设在datatable中有以下数据。

第一行：A B C D 第二行：P Q R S 第三行：U V W X

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

第四行：P Q R S

但是这个新行已经存在于datatable中，因此在添加新行时应该自动删除这个已存在的行。你可能会想为什么我们需要再次添加相同的行。因为，尽管在表格中看起来相同，但在数据库中它们是不同的。

有人能帮助我实现这个需求吗？

- user3742125

---

你尝试过什么吗？你能添加一个 jsfiddle 吗？ - Deepak Biswal

Answer 1

这里有一个可行的JSFiddle，可以动态添加行并在添加之前删除已存在的行。 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>

JS

以下代码中，我通过检查每行的第一个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 );
    }
} );

- Deepak Biswal

Answer 2

$(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();
    });
});

我在我们的项目中使用这些代码，它对我们有效，你也可以使用它。

- Vahap Gencdal