Add / Remove rows with jquery DataTables at specific index

Question

i am trying to add / remove rows dynamically in / from a table using JQuery and the DataTables plugin, at a specific index.

$('#jt').dataTable();

The rows i try to add is some additional info, which i get by clicking on a row (ajax). Each row has a unique id that i pass as an argument.

$('#jt').on('click','.togetinfo',function() {....
  $.get(functions, { id: id }).done(function(data) {
  ....

For each result i add the content to a var and add it after the row i want.

 $.each(jsonresult, function(i,item){
   subentries = subentries + ....... /* the info */
 });

 $('#jt > tbody > tr').eq(id).after(subentries);

This works perfectly on the first page, but on the second page of the entries (paging) it does not insert the new data.

The fnAddData() of the "DataTables" API inserts the data on the end of the entire table.

Does anyone has an idea of how to make it work on all the pages?

Answer 1

The false was found in the indexes of each row after the first page. Each index (on click) must be recalculated.

  var rowIndex = oTable.fnGetPosition(  $(this).closest('tr')[0] );
  rowIndex = rowIndex - oSettings._iDisplayStart;