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