CODEWITHSUNDEEP
jquerydatatables
Najam-us-Saqib
Najam-us-Saqib

Reputation: 534

Deleting a Row from JQuery Datatables

Hi I am deleting the row from the table using fnDeleteRow function but the problem is that it deletes the correct row for the first time only and than start deleting the next row instead of that for which I am pressing the delete button.

here is my code

$(document).ready(function() {
        $(document).delegate('.but', 'click', function() { 

            var id = this.id; //getting the ID of the pressed button
            var name = this.name; //getting the name of the pressed button

            /****AJAX Function*********/
            $.post('/products/delete', {id:id}, function(data) {
                if(data == 1){ //In case if data is deleted

                    var oTable = $('#table_id').dataTable(); // JQuery dataTable function to delete the row from the table
                    oTable.fnDeleteRow( parseInt(name, 10) );// JQuery dataTable function to delete the row from the table
                  //  oTable.fnDraw(true);



               }
                else
                    alert(data);
            });
        });
    });

this.name gives the row number of the row associated with the pressed button as I don't know any method to calculate the rowIndex dynamically from the dataTable.

As I calculate the row number on the server side and associate that number with the button, so when I delete the row datatable rearranges its rowIndex on client side and server does not know any thing regard this.

Any help to resolve this issue.

Upvotes: 4

Views: 25375

Answers (3)

Vahap Gencdal
Vahap Gencdal

Reputation: 2055

$(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 = $('#dataTable').DataTable();
        var tableRow = pageParamTable.row($(this).parents('tr'));
        pageParamTable.row( tableRow ).remove().draw();
    });
});

in this code you can find delete, add and update row from a DataTable it works for our peoject

Upvotes: 0

dxpkumar
dxpkumar

Reputation: 371

// Delete Row from dataTable - START //
    $('body').on('click', 'i.DeleteRow', function() {
          DeletedRow = $(this).parents('tr');
    });

    $('body').on('click', '.btnYES', function(){
        console.log('DeletedRow:', DeletedRow);
        $('#unitsTableDisplay').DataTable().row(DeletedRow).remove().draw();
    })
    // Delete Row from dataTable - END //

Upvotes: 4

Kiran
Kiran

Reputation: 20313

Try this:

$(document).ready(function() {
        $(document).delegate('.but', 'click', function() { 

            var id = this.id; //getting the ID of the pressed button
            var row = $(this).closest("tr").get(0);

            /****AJAX Function*********/
            $.post('/products/delete', {id:id}, function(data) {
                if(data == 1){ //In case if data is deleted

                    var oTable = $('#table_id').dataTable(); // JQuery dataTable function to delete the row from the table
                    oTable.fnDeleteRow(oTable.fnGetPosition(row));// JQuery dataTable function to delete the row from the table
                  //  oTable.fnDraw(true);
               }
                else
                    alert(data);
            });
        });
    });

Upvotes: 9

Related Questions