StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>One plugin I've found particularly helpful when needing to add rows to a DataTable (either from dynamically created HTML, or an Ajax push) is the fnAddTr plugin from the DataTables website. You can find it on their <a href="http://www.datatables.net/plug-ins/api" rel="nofollow">API plugins page</a></p> <p>Here is the code for you:</p> <pre><code>$.fn.dataTableExt.oApi.fnAddTr = function ( oSettings, nTr, bRedraw ) { if ( typeof bRedraw == 'undefined' ) { bRedraw = true; } var nTds = nTr.getElementsByTagName('td'); if ( nTds.length != oSettings.aoColumns.length ) { alert( 'Warning: not adding new TR - columns and TD elements must match' ); return; } var aData = []; for ( var i=0 ; i < nTds.length ; i++ ) { aData.push( nTds[i].innerHTML ); } /* Add the data and then replace DataTable's generated TR with ours */ var iIndex = this.oApi._fnAddData( oSettings, aData ); nTr._DT_RowIndex = iIndex; oSettings.aoData[ iIndex ].nTr = nTr; oSettings.aiDisplay = oSettings.aiDisplayMaster.slice(); if ( bRedraw ) { this.oApi._fnReDraw( oSettings ); } }; }(jQuery)); </code></pre> <p>Use it like this:</p> <pre><code>var oRecords = $(".data-table").dataTable({ ... DataTables Initialization ... }); ... code ... var myTr = $("<tr><td>Field1</td><td>Field2</td></tr>")[0]; // This tr can come from anywhere, but it's very important that you either get the true DOM node by getting index zero, or by chaining .get(); oRecords.fnAddTr(myTr); </code></pre> <p>The plugin takes care of adding the row, redrawing the table, and updating the pagination!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload