Posting form elements that aren't visible in DataTables

Question

I am using a jQuery plug-in called Datatables on a table contained within a form, and this table will contain many form elements.

I have a Save Changes button on the page, which will execute an AJAX request to update the database based on what the user has entered.

The problem I have is that it will only post the form element that are currently visible in the Datatable. In an example I have, there are 74 rows (all containing several fields). The default amount of records to show is 10.

So when the form is submitted only form elements of 10 rows are submitted. I was to submit the fields of all the rows - in this case all 74 rows worth of fields.

Does anyone have a solution for this? THanks.

Answer 1

Datatables destroys the hidden rows and takes them out of the DOM. If you need to do a submit, you should use fnGetHiddenNodes() to retrieve the hidden rows before submitting. take a look at the api pages

$.fn.dataTableExt.oApi.fnGetHiddenNodes = function ( oSettings )
{
    /* Note the use of a DataTables 'private' function thought the 'oApi' object */
    var anNodes = this.oApi._fnGetTrNodes( oSettings );
    var anDisplay = $('tbody tr', oSettings.nTable);

    /* Remove nodes which are being displayed */
    for ( var i=0 ; i<anDisplay.length ; i++ )
    {
        var iIndex = jQuery.inArray( anDisplay[i], anNodes );
        if ( iIndex != -1 )
        {
            anNodes.splice( iIndex, 1 );
        }
    }

    /* Fire back the array to the caller */
    return anNodes;
}