DataTables logo DataTables

fnDeleteRow problem
  • I am having a problem with fnDeleteRow.

    According to the API documentation (http://www.datatables.net/api): the inital input parameter is:

    node (TR): the TR element that should be deleted from the table
    or
    int : Index of the row to delete from the aoData object (use the fnGetPosition() API function to find the index of a row in this array)."

    My table looks like this:
    	  <table cellpadding="0" cellspacing="0" border="0" class="display" id="manage_tbl" style="width:100%">
    	    <thead>
    		  <tr>
    			  <th>Title</th>
    			  <th>Edit</th>
    			  <th>Delete</th>
    		  </tr>
    	    </thead>
    	    <tbody>	    
    	    <tr id="tr_127">
    				<td id="title_127">Bill Clinton</td>
    				<td><a href="#" id="edit_127" onClick="edit_source(this);return false;">Edit</a></td>
    				<td><a href="#" id="delete_127" onClick="delete_source(this);return false;">Delete</a></td>
    		  </tr>
    	    <tr id="tr_112">
    				<td id="title_112">Capital</td>
    				<td><a href="#" id="edit_112" onClick="edit_source(this);return false;">Edit</a></td>
    				<td><a href="#" id="delete_112" onClick="delete_source(this);return false;">Delete</a></td>
    		  </tr>
    	    </tbody>
    	  </table>
    

    It has been initialized like this:
    		$('#manage_tbl').dataTable({
    			"bJQueryUI": true,
    			"bAutoWidth": false,
    			"bLengthChange": false,
    			"bPaginate": true,
    			"sPaginationType": "full_numbers",
    			"bScrollCollapse": false,
    			"iDisplayLength": 20,
    			"oLanguage": {
    				"sSearch": "Filter:",
    			},
    			"aoColumns":[
    			        {"sWidth": "50%", "bSortable": false},				
    				{"sWidth": "5%", "bSortable": false},
    				{"sWidth": "5%", "bSortable": false}
    			]
    		});
    


    I have tried to use fnGetPosition in 2 different ways (the var did is equal to the portion of the row id following the "_"):

    var pos = miTable.fnGetPosition($('#tr__' + did));
    
    and
      var pos = miTable.fnGetPosition(document.getElementById('tr__' + did));
    

    In either case, I get a jQuery error ("nNode.nodeName is undefined") triggered at at jQuery line 1755:
      if ( nNode.nodeName.toUpperCase() == "TR" )
    

    If I try without using fnDeleteRow by passing the node directly using the DOM or jQuery, the row is correctly identified (verified via Firebug) and I don't get an error, but the row does not get deleted:
     miTable.fnDeleteRow(document.getElementById('tr__' + did));
    
    or
    miTable.fnDeleteRow($('#tr__' + did));
    

    Puzzled. Can anyone help?

    TIA

    -DF
  • In the words of Mrs. Emily Litella, "never mind" -- I was pointing at the wrong table.

    -DF
  • Well, mostly never mind. I was pointing at the wrong table but when I fixed this, it didn't resolve the fnGetPosition error, but I was able to get fnDeleteRow working by passing it the correct DOM TR node as returned by document.getElementById.

    -DF
  • Funny, fnGetPosition should be working :-). One thing to note about your jQuery selectors, you are passing a jQuery object to the DataTables functions there, not a DOM node. To do that, just use the first element of the array:

    $('#tr__' + did)[0]
    
    for example.

    Allan
  • Thanks Allan, it was useful......
This discussion has been closed.
All Discussions

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Support

Get useful and friendly help straight from the source.