Excess columns visible in datatable on first load

Ashwini410

I have a datatable which is populated using 'sAjaxSource' which is a JSON file on the server. This file has 18 values, whereas only first 6 values are shown in the datatable.
For this I have set the bVisible property for the columns.
When I try to load the datatable for the first time, it displays 10 columns, and the UI is quite messed up.
On reloading the screen, 6 columns are displayed and remaining are hidden as desired.

Why do these extra columns appear on loading the screen for the first time?
My code is as below :

[code]
var oTable = $('#example').dataTable({
"bRetrieve" : true,
"bSortClasses" : false,
"bDestroy" : true,
"bServerSide" : true,
"bStateSave" : false,
"bJQueryUI" : true,
"sPaginationType" : "full_numbers",
"sAjaxSource" : jsonPath,
"bDeferRender" : true,
"iDisplayLength" : 18,
"bAutoWidth" : false,
"sScrollY" : // some height,
"sScrollX" : "100%",
"sScrollXInner" : "100%",
"bLengthChange" : false,
"aoColumnDefs" : [
{
"aTargets" : [ 0 ],
"mDataProp" : function ( data, type, val ) {
// data is processed here
return data[0];
}
}, // same code for 6 columns
{ "bVisible" : true, "aTargets" : [0,1,2,3,4,5] },
{ "bVisible" : false, "aTargets" : [6,7,8,9,10,11,12,13,14,15,16,17]},
]
});
[/code]
Can anybody help?

allan

It should be that DataTables will remove the elements as soon as it can (initialisation), so you might see a flicker of unscripted HTML, but it should be fast. If you can see them for a few seconds, please link to a test case so I can take a look and see what is happening.

I should also saying that using bRetrieve and bDestroy at the same doesn't really make much sense :-). I'm the author and I don't know which one would take priority (without looking at the source at least). They are mutually exclusive, how and it both retrieve the current instance and destroy it to return a new one :-)

Allan

Ashwini410

Thanks Allan.
This does not appear for only a few seconds. The UI remains messed up until I reload the page.
It would be great if I could attach screenshots.
Could you please guide me as to how I can attach screenshots?

Ashwini

Ashwini410

Hi,

I cannot see the ajax request getting fired in the firebug on first load.
Can the database requests be made synchronous? What might be the reason?

Thanks,
Ashwini

allan

There is no ability to attach screenshots to the forum, and to be honest, I think they would be of limited use. I'd need to actually see the the page in action.

> I cannot see the ajax request getting fired in the firebug on first load.

That sounds worrying, if you are ajax loading the table! Again, I don't know why it would be without the the page though.

Allan

Ashwini410

Hi Allan,

I have changed the mDataProp to mRender. When I try to debug in firebug, the control does not go inside the function.
Am I doing anything wrong here :

[code]
"mRender": function (data, type, val) {
alert(data[0]);
// data is processed here
return data[0];
},
"aTargets": [0]
[/code]

I am using jquery.datatables - 1.9.4 and jquery - 1.8.2
Is there any property that is not compatible with this version, due to which the data is not loading.

This page is on my local machine. How should I make it available to you?

Thanks,
Ashwini

allan

> This page is on my local machine. How should I make it available to you?

Put it on a web-server where I can access it please :-)

Your mRender looks fine to me, so I don't understand why it isn't working.

Allan

Ashwini410

Sorry, don't have a live server.
Here is the link to jsFiddle.
http://jsfiddle.net/ashwini410/RFRbH/12/
Hope this helps.

Ashwini410

I could solve my problem by adding bDestroy and upgrading the jquery datatables version and jquery version.
Thanks.