Dynamically adding and deleting rows in jquery datatable

Question

In the jquery datatable I am adding rows dynamically while clicking on a button. But While adding a new row then it should automatically delete if there is a similar row existing in the table.

Suppose in the datatable I have following data.

Row1 : A B C D Row2 : P Q R S Row3 : U V W X

Now I am going to add a new one like below.

Row4 : P Q R S

But this new one is already there in the datatable so this existing one should be deleted automatically while adding this new one. You may think why we need to add the same one again. Because , though it looks like same one in the table, it is different in database.

Can some one help me achieve this requirement.

Did you try anything? Can you add a jsfiddle?

Deepak Biswal
– Deepak Biswal

2015-11-06 07:18:16 +00:00
Commented Nov 6, 2015 at 7:18 — Deepak Biswal
– Deepak Biswal, Commented Nov 6, 2015 at 7:18

Deepak Biswal · Accepted Answer · 2015-11-06 10:03:41Z

Here is a working fiddle to add row dynamically and remove if it's already there before adding.

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

In the below codes, I am checking a record is exist or not in the DataTable by checking the first TD value of each row. If the provided index counter value is in the first TD then I am assuming that already exist. And then I am adding a .remove class to remove that row. Hope you get my point.

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

Vahap Gencdal · Accepted Answer · 2017-12-09 23:29:00Z

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

I am using this codes on our projescts it worked for use you can use this

Collectives™ on Stack Overflow

Dynamically adding and deleting rows in jquery datatable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related