Understanding Columns with DataTables

jayce

I display statistics following years.

I use DataTables coded in JavaScript.

I chose in a select tag one year and my application displays the statistics since this year.

The first selection year works well but I chose a second year, I have this :

First selection (year 2005), it works well :

http://i.stack.imgur.com/yy1BQ.png

Second selection (year 2011), displays columns too :

http://i.stack.imgur.com/KCcP7.png

Thrid selection (year 2004), missing the last column title:


http://i.stack.imgur.com/GLmpf.png

Here is my JavaScript code :

[code]function showStatistic11() {
$("#contentCamp").empty();
$.ajax({
url: 'Statistic_11.html',
dataType: 'html',
success: function (data) {
$("#contentCamp").html(data);
getStatistic11();
},
error: function (e) {
alert("Error loading statistic 11 html : " + e.statusText);
}
});
}

function getStatistic11() {

var response;
var allstat11 = [];
var allyearstat11 = [];
var currentYear = new Date().getFullYear();
var nbY = $('#Select1').val();

if (nbY) {//first time empty
nbY = currentYear - nbY;
$.ajax({
type: 'GET',
url: 'http://localhost:52251/Service1.asmx/Statistic_11',
data: { "nbYear": nbY },
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
response = msg.d;
for (var i = 0; i < response.Items.length; i++) {
allstat11[i] = new Array(nbY);
var j = 0;
allstat11[i][j] = response.Items[i].Interventie;
var t = 1;
while (j <= nbY) {

allstat11[i][t] = response.Items[i].Sum[j];
t++;
j++;
}
}

allyearstat11[0] = "";
var n = 1;
for (var k = 0; k <= nbY; k++) {

allyearstat11[n] = response.Items[0].YearStart + k;
n++;
}
fillDataTable11(allstat11, allyearstat11);
$('table').visualize({ type: 'line' });

},
error: function (e) {
alert("error loading statistic 11");
}
});
}
}

function fillDataTable11(data, allyearstat11) {

if ($("#table_statistic_11").css("visibility") == "hidden")
$("#table_statistic_11").css("visibility", "visible");

var tabTitreColonne = [];

for (var i = 0; i < allyearstat11.length; i++) {
tabTitreColonne.push({
"sTitle": allyearstat11[i],
});
};

$('#table_statistic_11').dataTable({

'aaData': data,
'aoColumns': tabTitreColonne,
"iDisplayLength": 12,
"bJQueryUI": true,
"bDestroy": true,
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"bAutoWidth": false
});
}[/code]


Is there a problem with the caracteristic of my dataTables (bDestroy, bFilter, bAutoWidth...)? What's wrong?