ColReorder, fnReloadAjax, and sColumns, incorrect cols after reload
ColReorder, fnReloadAjax, and sColumns, incorrect cols after reload
Hi everyone,
I am trying to use ColReorder on a table where I use fnReloadAjax but after reordering columns all ajax reloads do not take the column sNames into consideration, and the data it put into the wrong columns.
Anyone know of a way to get it to work with fnReloadAjax?
My init code:
[code] sales_report_category_table = $('#sales_report_category_list').dataTable({
"bServerSide": false,
"bProcessing": false,
"sAjaxSource": "libs/ajax_sales_report_category_list.php",
"aaSorting": [[5,"desc"], [0,"asc"]],
"bJQueryUI": true,
"sDom": '<"H"l<"dt-title"i>fr>t<"F"TCp>',
"oTableTools": {
"sSwfPath": "templates/default/3rdparty/DataTables-1.7.5/extras/TableTools-2.0.0/media/swf/copy_cvs_xls_pdf.swf",
"aButtons": [
"print",
"copy",
{
"sExtends": "collection",
"sButtonText": "Export",
"aButtons": [ "csv", "xls", "pdf" ]
}
]
},
"sPaginationType": "full_numbers",
"bPaginate": true,
"iDisplayLength": -1,
"aLengthMenu": [
[10, 25, 50, -1],
[10, 25, 50, "All"]
],
"aoColumns": [
{ "sName": "category" },
{ "sName": "category_id" },
{ "sName": "quantity" },
{ "sName": "subtotal" },
{ "sName": "tax" },
{ "sName": "total" }
],
"aoColumnDefs": [
{ "aTargets": ["dt-hidden"], "bVisible": false, "bSearchable": false },
{ "aTargets": ["dt-icon"], "sClass": "noprint", "sWidth": "25px", "bSortable": false, "bSearchable": false },
{ "aTargets": ["dt-center"], "sClass": "dt-center" },
{ "aTargets": ["dt-currency"], "sClass": "dt-currency" },
{ "aTargets": ["dt-link"], "sClass": "dt-link" }
],
"oLanguage": {
"sInfo": "Displaying Items _START_ to _END_ out of _TOTAL_"
},
"fnServerData": function ( sSource, aoData, fnCallback )
{
aoData.push(
{ "name": "filter_date", "value": $('#filter_date').val() },
{ "name": "filter_date_end", "value": $('#filter_date_end').val() },
{ "name": "filter_employees", "value": $('#filter_employees').val() }
);
$.getJSON( sSource, aoData, function(response)
{
$('#summary_invoices').html( response.sums.invoices );
$('#summary_quantity').html( response.sums.quantity );
$('#summary_subtotal').html( response.sums.subtotal );
$('#summary_tax').html( response.sums.tax );
$('#summary_total').html( response.sums.total );
fnCallback(response);
})
},
"bAutoWidth": false
});
new ColReorder( sales_report_category_table );[/code]
the sColumns value returned by my ajax source
[code]"category,category_id,quantity,subtotal,tax,total"[/code]
my fnReloadAjax function
[code]
$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw )
{
if ( typeof sNewSource != 'undefined' && sNewSource != null )
{
oSettings.sAjaxSource = sNewSource;
}
this.oApi._fnProcessingDisplay( oSettings, true );
var that = this;
var iStart = oSettings._iDisplayStart;
this.fnClearTable( this ); // added to prevent undefined=undefined= over and over
oSettings.fnServerData( oSettings.sAjaxSource, oSettings.aoData, function(json) {
/* Clear the old information from the table */
that.oApi._fnClearTable( oSettings );
/* Got the data - add it to the table */
for ( var i=0 ; i
I am trying to use ColReorder on a table where I use fnReloadAjax but after reordering columns all ajax reloads do not take the column sNames into consideration, and the data it put into the wrong columns.
Anyone know of a way to get it to work with fnReloadAjax?
My init code:
[code] sales_report_category_table = $('#sales_report_category_list').dataTable({
"bServerSide": false,
"bProcessing": false,
"sAjaxSource": "libs/ajax_sales_report_category_list.php",
"aaSorting": [[5,"desc"], [0,"asc"]],
"bJQueryUI": true,
"sDom": '<"H"l<"dt-title"i>fr>t<"F"TCp>',
"oTableTools": {
"sSwfPath": "templates/default/3rdparty/DataTables-1.7.5/extras/TableTools-2.0.0/media/swf/copy_cvs_xls_pdf.swf",
"aButtons": [
"print",
"copy",
{
"sExtends": "collection",
"sButtonText": "Export",
"aButtons": [ "csv", "xls", "pdf" ]
}
]
},
"sPaginationType": "full_numbers",
"bPaginate": true,
"iDisplayLength": -1,
"aLengthMenu": [
[10, 25, 50, -1],
[10, 25, 50, "All"]
],
"aoColumns": [
{ "sName": "category" },
{ "sName": "category_id" },
{ "sName": "quantity" },
{ "sName": "subtotal" },
{ "sName": "tax" },
{ "sName": "total" }
],
"aoColumnDefs": [
{ "aTargets": ["dt-hidden"], "bVisible": false, "bSearchable": false },
{ "aTargets": ["dt-icon"], "sClass": "noprint", "sWidth": "25px", "bSortable": false, "bSearchable": false },
{ "aTargets": ["dt-center"], "sClass": "dt-center" },
{ "aTargets": ["dt-currency"], "sClass": "dt-currency" },
{ "aTargets": ["dt-link"], "sClass": "dt-link" }
],
"oLanguage": {
"sInfo": "Displaying Items _START_ to _END_ out of _TOTAL_"
},
"fnServerData": function ( sSource, aoData, fnCallback )
{
aoData.push(
{ "name": "filter_date", "value": $('#filter_date').val() },
{ "name": "filter_date_end", "value": $('#filter_date_end').val() },
{ "name": "filter_employees", "value": $('#filter_employees').val() }
);
$.getJSON( sSource, aoData, function(response)
{
$('#summary_invoices').html( response.sums.invoices );
$('#summary_quantity').html( response.sums.quantity );
$('#summary_subtotal').html( response.sums.subtotal );
$('#summary_tax').html( response.sums.tax );
$('#summary_total').html( response.sums.total );
fnCallback(response);
})
},
"bAutoWidth": false
});
new ColReorder( sales_report_category_table );[/code]
the sColumns value returned by my ajax source
[code]"category,category_id,quantity,subtotal,tax,total"[/code]
my fnReloadAjax function
[code]
$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw )
{
if ( typeof sNewSource != 'undefined' && sNewSource != null )
{
oSettings.sAjaxSource = sNewSource;
}
this.oApi._fnProcessingDisplay( oSettings, true );
var that = this;
var iStart = oSettings._iDisplayStart;
this.fnClearTable( this ); // added to prevent undefined=undefined= over and over
oSettings.fnServerData( oSettings.sAjaxSource, oSettings.aoData, function(json) {
/* Clear the old information from the table */
that.oApi._fnClearTable( oSettings );
/* Got the data - add it to the table */
for ( var i=0 ; i
This discussion has been closed.
Replies
I'm rewrite _fnAddData from jquery.datatable.js version 1.7.5 to.
[code]
/*
* Function: _fnAddData
* Purpose: Add a data array to the table, creating DOM node etc
* Returns: int: - >=0 if successful (index of new aoData entry), -1 if failed
* Inputs: object:oSettings - dataTables settings object
* array:aData - data array to be added
* Notes: There are two basic methods for DataTables to get data to display - a JS array
* (which is dealt with by this function), and the DOM, which has it's own optimised
* function (_fnGatherData). Be careful to make the same changes here as there and vice-versa
*/
function _fnAddData ( oSettings, aDataSupplied )
{
/* Sanity check the length of the new array */
if ( aDataSupplied.length != oSettings.aoColumns.length &&
oSettings.iDrawError != oSettings.iDraw )
{
_fnLog( oSettings, 0, "Added data (size "+aDataSupplied.length+") does not match known "+
"number of columns ("+oSettings.aoColumns.length+")" );
oSettings.iDrawError = oSettings.iDraw;
return -1;
}
/* Create the object for storing information about this new row */
var aData = aDataSupplied.slice();
var iThisIndex = oSettings.aoData.length;
oSettings.aoData.push( {
"nTr": document.createElement('tr'),
"_iId": oSettings.iNextId++,
"_aData": aData,
"_anHidden": [],
"_sRowStripe": ''
} );
/* Create the cells */
var nTd, sThisType;
for ( var i=0 ; i
Some good new and bad news:
Good: Your fix works and the data is displayed in the correct column after each fnReloadAjax() command.
Bad: After doing an fnReloadAjax() when the order of the cols is changed, sorting the data uses the wrong column.
Ex: In a table with 2 columns, if you rearrange the columns and then sort by the second column, the data in the first column ends up getting sorted.
Thanks so much for your efforts!
We must not change columns sort and css, but only data. Here is fixed version
[code]
function _fnAddData ( oSettings, aDataSupplied )
{
/* Sanity check the length of the new array */
if ( aDataSupplied.length != oSettings.aoColumns.length &&
oSettings.iDrawError != oSettings.iDraw )
{
_fnLog( oSettings, 0, "Added data (size "+aDataSupplied.length+") does not match known "+
"number of columns ("+oSettings.aoColumns.length+")" );
oSettings.iDrawError = oSettings.iDraw;
return -1;
}
/* Create the object for storing information about this new row */
var aData = aDataSupplied.slice();
var iThisIndex = oSettings.aoData.length;
oSettings.aoData.push( {
"nTr": document.createElement('tr'),
"_iId": oSettings.iNextId++,
"_aData": aData,
"_anHidden": [],
"_sRowStripe": ''
} );
/* Create the cells */
var nTd, sThisType;
for ( var i=0 ; i
After doing fnAjaxReload() the column data ends up in it original spots, with the headers now in the wrong order.
:(
I appreciate the effort you have put into this.
Ryan