Adding more data to dataTables without refreshing whole table (ServerSide table).

kwak

Hi, I need to add some more rows below the one that user choose. Data in aaData is fetched for the selection (lets say 2 rows came back), how to insert them but without refreshing whole table?
I can use fnAddData, cuz it needs fnDraw to render table data anyway. I cant either add manually some data to aoData, cuz in order to render proper TR markup, fnDraw has to be called.

Is there a way to manually render few rows (like some use of _fnCreateTr) in a chosen destination (tr position)?

kwak

Ive found a solution myself. Ive created a following plugin:

/**
* DataTables plugin that helps adding rows to the dynamic table.
* This does not recreate whole table, rather manually creates and append rows at a specific
* position.
*
* @param {Object} oSettings Internal dataTables settings/options cache.
* @param {Array} data Data from which new row is created.
* @param {Object} position Starting position where adding rows should occur.
* @author Grzegorz Kaczan
*/

$.fn.dataTableExt.oApi.fnAddRow = function ( oSettings, data, position, afterAdd ) {
var iIndex, nTr;

// Can't just use fnAddData since its appending data (to the end).
// Or can use it but we need to move newly added data back to preferred position.
// Add data.
iIndex = this.oApi._fnAddData( oSettings, data );

// Move added row to the chosen position.
core.array.moveElement(oSettings.aoData, iIndex, (position + 1)); // core.array.moveElement just
iIndex = position + 1; // moves element around in an arr.

// Create TR markup.
oSettings.oApi._fnCreateTr( oSettings, iIndex );
nTr = oSettings.aoData[ iIndex ].nTr;

// Append physically to table body.
$(oSettings.nTBody).children('TR').eq(position).after( nTr );

// Finally call aoRowCallback.
oSettings.oApi._fnCallbackFire( oSettings, 'aoRowCallback', null,
[nTr, data, iIndex, iIndex] );
};