ColReorder, fnReloadAjax, and sColumns, incorrect cols after reload

rewen

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

rewen

Anyone? :(

kapitanrum

Hello,

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

kapitanrum

If anybody solve this better (without change jquery.datatable source) I will be pleased. :)

rewen

Thanks - I will try this!

rewen

Hi again,

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!

kapitanrum

I have do mistake for sort and css styles

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

rewen

Thanks for all of your hard work kapitanrum, however it seems to work only with server side but not with one-time ajax + fnAjaxReload()

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