Dynamic columns using server-side processing
Dynamic columns using server-side processing
We are using DataTables to display the results of multiple different data analysis processes where each analysis has on average 18,000 result rows and a variable number of columns that is defined when the analysis is run.
Initially we implemented this using the default in-memory paging model of DataTables which resulted in understandably long browser rendering times while the 18k+ rows were evaluated. This was acceptable for the initial proof of concept, but now we need to improve performance.
I have setup the code to use server-side processing so we only load a sub-set of the data with each page display. The problem I've run into is that with server-side processing the column definitions must be in place before fnServerData() is called, but in our case the column definitions are not available until the analysis is run.
A post from a few years ago suggested making an initial AJAX call to get the column definitions, and then a second call to load the first page of data. This has obvious disadvantages due to the extra AJAX request, and it requires us to run the query twice since the columns are dependent on the query.
Is there a better option these days? Ideally I'd like to include the columns data in the JSON response and initialize the columns on the first call. I would setup my fnServerData() method similar to the following pseudo code (dataTable is a placeholder for a reference to the datatable).
[code]
fnServerData: function ( sSource, aoData, fnCallback )
{
$.ajax( {
dataType: 'json',
type: "POST",
url: "/foo/bar",
data: aoData,
success: function( data )
{
if (dataTable.aoColumns.length == 0)
{
dataTable.aoColumns = data.aoColumns;
}
fnCallback( data )
}
} );
},
[/code]
Is it possible to safely modify the aoColumns array after the table is initialized? Thank you for your assitance.
Initially we implemented this using the default in-memory paging model of DataTables which resulted in understandably long browser rendering times while the 18k+ rows were evaluated. This was acceptable for the initial proof of concept, but now we need to improve performance.
I have setup the code to use server-side processing so we only load a sub-set of the data with each page display. The problem I've run into is that with server-side processing the column definitions must be in place before fnServerData() is called, but in our case the column definitions are not available until the analysis is run.
A post from a few years ago suggested making an initial AJAX call to get the column definitions, and then a second call to load the first page of data. This has obvious disadvantages due to the extra AJAX request, and it requires us to run the query twice since the columns are dependent on the query.
Is there a better option these days? Ideally I'd like to include the columns data in the JSON response and initialize the columns on the first call. I would setup my fnServerData() method similar to the following pseudo code (dataTable is a placeholder for a reference to the datatable).
[code]
fnServerData: function ( sSource, aoData, fnCallback )
{
$.ajax( {
dataType: 'json',
type: "POST",
url: "/foo/bar",
data: aoData,
success: function( data )
{
if (dataTable.aoColumns.length == 0)
{
dataTable.aoColumns = data.aoColumns;
}
fnCallback( data )
}
} );
},
[/code]
Is it possible to safely modify the aoColumns array after the table is initialized? Thank you for your assitance.
This discussion has been closed.
Replies
fnServerData() is called by _fnInitalise() which is called at the end of the main plugin loop, quite a bit after the point where the columns are defined.
As far as I can tell the safest bet is still to make an initial AJAX call to get the column definitions before the DataTable is initialized.
- Matt