removing row in datatables

Question

I have a table using the datatable plugin. I am trying to remove a row from it dynamically using this:

$(document).ready(function() {

    var oTable = $("table#demo-dtable-02").dataTable({"aaSorting": []});

    $(".icon-remove").on('click',function(){
        var anSelected = fnGetSelected( oTable );
        deleted=oTable.fnDeleteRow(anSelected[0] );
      });

              });

I get the following error ReferenceError: fnGetSelected is not defined I tried using (from here: jQuery Data Tables plugin not removing table row)

$(this).parent('tr').remove();

This would of course remove the row but will not reset the text in the footer like Showing 1 to 10 of 17 entries. Removing this way is not the best solution to this.

My DOM Code looks like:

<?PHP
                                            $count=1;
foreach($ledgers as $row) {?>
    <tr >
    <td><a onClick="viewDetails(<?PHP echo $row['id'];?>)" style="cursor:pointer"><?PHP echo $row['name'];?></a></td>

     <td><?PHP echo $row['email'];?></td>
     <td><?PHP echo $row['contact_number'];?></td>

     <td>
     <i class="icon-remove" rowcount=<?PHP echo $count;?> style="cursor:pointer; margin-right:5px" title="Remove Ledger" id="removeLedgerNow"></i>

    <i class="icon-edit" style="cursor:pointer" title="Edit Ledger" onclick="viewDetails(<?PHP echo $row['id'];?>)"></i>

   </td>
  </tr>
   <?PHP $count++; } ?>

Comment.

Why are you using .each()? That's not how you set click events — Abhilash
– Abhilash, Commented Nov 24, 2012 at 8:59

Abhilash · Accepted Answer · 2012-11-24 11:47:22Z

4

Updated:

Try this code:

 $('.icon-remove').on('click', function () {
   // Get the position of the current data from the node
   var aPos = oTable.fnGetPosition( $(this).closest('tr').get(0) );
   // Delete the row
   oTable.fnDeleteRow(aPos);
 } );

Notes:

There is no fnGetSelected in the API. It could be a custom function the OP has, but is not produced in the question.
fnGetPosition is accepts td, th, or tr element
.get(0) is to break the element out of the jQuery object

edited Nov 24, 2012 at 11:47

answered Nov 24, 2012 at 9:11

Abhilash

1,6109 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

beNerd Over a year ago

results in this error: aPos is null. You have used 'this' in fnGetPosition but this in this case is the class (.icon-remove) handler which is just a button in each row. Just guessing :)

Abhilash Over a year ago

Just for clarity, the .icon-remove class i am using is set to the last td in each tr. How's your DOM?

beNerd Over a year ago

See my edit in the question <i class="icon-remove" rowcount=<?PHP echo $count;?> style="cursor:pointer; margin-right:5px" title="Remove Ledger" id="removeLedgerNow"></i> This line is the one.

Abhilash Over a year ago

Try using $(this).closest('tr') OR $(this).closest('td') instead of this, and tell me which (if any) works

Abhilash Over a year ago

How about this? $(this).closest('td'). Sorry I don't have a test environment. jsbin and jsfiddle are both mystersiously not working

|

Collectives™ on Stack Overflow

removing row in datatables

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related