weird table resize when loading Ajax

tomy300

Hello, I'm getting weird tableresize when data is loading only,

here a screenshot of the datatable

http://www.picamatic.com/show/2013/10/17/06/21/9719877_1082x492.jpg

I know the code is a mess right now but it's work

[code]
function CallGridEntenteServicesClients(trimestre)
{


$('#grid_ententesClients').css('display','none');

tvq = 0.05;
tps = 0.09975;
ArrSansTax = new Array();
ArrAvecTax = new Array();
ArrSansTax.length = 0; // Delete all content of Array
ArrAvecTax.length = 0; // Delete all content of Array
i = 0;
a = 0;
if(typeof oTableC !== "undefined"){ $("#tablebody").empty()}



oTableC = $('#grid_ententesClients').dataTable( {
"bJQueryUI": true,
"aaSorting": [[ 0, "desc" ]],
"bServerSide": true,
"bDestroy": true,
"bPaginate": false,
"bInfo": false,
"bFilter": false,
//"sScrollY": "450px",
"iDisplayLength": 10,
//"sDom": "Rlfrtip",
//"sDom": 'RC<"clear">lfrtip',
//"sPaginationType": "full_numbers",
//"sDom": '<"top">rt<"bottom"flp><"clear">',
"oLanguage": {
"sLengthMenu": "Montrer _MENU_ entrées",
"sZeroRecords": "Aucun résultat - désolé",
"sInfo": "_START_ - _END_ de _TOTAL_ entrées",
"sInfoEmpty": "0 - 0 de 0 entrées",
"sLoadingRecords": "Un instant SVP - chargement...",
"sProcessing": "En traitement",
"sSearch": "Rechercher:",
"oPaginate": {
"sFirst": "<<",
"sLast": ">>",
"sNext": ">",
"sPrevious": "<"
},
"sInfoFiltered": "(filtré de _MAX_ entrées total)"
},
"aoColumns":[
null,null,null,null,null,null,
{ "sClass": "sansTaxes",
"fnRender": function (oObj) {
//i = 0;


var sReturn = Number(oObj.aData[6]).toFixed(2);
// alert(Number(oObj.aData[6]).toFixed(2));
//ArrSansTax[i] = sReturn;
//i++;

return sReturn;
}
},
{ "sClass": "avecTaxes",
"fnRender": function (oObj) {


var sReturn = (Number(oObj.aData[6]) + (Number(oObj.aData[6]) * (tvq+tps))).toFixed(2);
//ArrAvecTax[a] = sReturn;

return sReturn;
}
},
{ "fnRender": function (oObj) {
return '';
}
},
{ "bSearchable": false,
"bVisible": false },
],

"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
if(aData[9]!=0){
nRow.className = "cmptSouffrance";
}
return nRow;
},

"fnInitComplete": function(oSettings, json) {

var iTotalSansTax = 0;
var iTotalAvecTax = 0;
$.each( oTableC.fnGetData(), function(i, row){
//ArrSansTax[i] = ArrSansTax[i] + row[6];
iTotalSansTax = iTotalSansTax + Number(row[6]);
iTotalAvecTax = iTotalAvecTax + Number(row[7]);

})
$("#tst").html(Number(iTotalSansTax).toFixed(2))
$("#tat").html(Number(iTotalAvecTax).toFixed(2))
$("#choixTrimestre").html(trimestre);
},
"sAjaxSource": "includes/sys/getEntenteClient.php?trimestre=" + trimestre
});
$('#grid_ententesClients').css('display','block');

}
[/code]

I tried to display none the table before loading the data and block after but this does't seem to fix the problem.

any help???

thanks

allan

Please link to a test case showing the issue: http://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read

It looks to me like the table simply can't fit into the display area. Try enabling `sScrollX: 100%` , but that's only one possibility. I can't say for sure without a test case.

Allan

tomy300

Well the test case will not work because it use ajax and server database... not sure it will work

but anyway here the link to test it..

click the combo 'Trimestre' to change data, I tried sScrollY 100% and it not working,


also if you go to "Prix" section and click on 'ajout' tab, you will see that the data appear before the style so..... the gris not look good for the first loading

allan

It looks like you are destroying the table and then creating a new one every time the `Trimestre` option is changed. That's very inefficient - it will destroy the table, putting the original HTML table back into the document and then wait until the next table is loaded - hence why it looks ugly for a second or two.

I've very much suggest that you simply use fnServerParams to send different data to the server and then simply call fnDraw to redraw the table (since you are using server-side processing).

Allan

tomy300

it's because I use Tabs, and initalise grid when user click on a tab, so I call a function, so I probaly need to declare grid variable at the top of javascript and then call fndraw with new parameter....