Excess columns visible in datatable on first load

Excess columns visible in datatable on first load

Ashwini410Ashwini410 Posts: 7Questions: 0Answers: 0
edited July 2013 in DataTables 1.8
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?

Replies

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    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
  • Ashwini410Ashwini410 Posts: 7Questions: 0Answers: 0
    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
  • Ashwini410Ashwini410 Posts: 7Questions: 0Answers: 0
    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
  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    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
  • Ashwini410Ashwini410 Posts: 7Questions: 0Answers: 0
    edited August 2013
    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
  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    > 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
  • Ashwini410Ashwini410 Posts: 7Questions: 0Answers: 0
    edited August 2013
    Sorry, don't have a live server.
    Here is the link to jsFiddle.
    http://jsfiddle.net/ashwini410/RFRbH/12/
    Hope this helps.
  • Ashwini410Ashwini410 Posts: 7Questions: 0Answers: 0
    edited August 2013
    I could solve my problem by adding bDestroy and upgrading the jquery datatables version and jquery version.
    Thanks.
This discussion has been closed.