了解具有DataTables的列

时间:2014-03-05 15:16:23

标签: javascript datatables jquery-datatables

我显示了多年后的统计数据。

我使用JavaScript编码的DataTables。

我选择了一年的选择标签,我的应用程序显示了今年以来的统计数据。

第一个选拔年份运作良好,但我选择了第二年,我有这个:

首选(2005年),效果很好:

enter image description here

第二次选择(2011年),也显示列:

enter image description here

Thrid选择(2004年),错过了最后一列标题:

enter image description here

这是我的JavaScript代码:

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
});
}

我的dataTables(bDestroy,bFilter,bAutoWidth ......)的特征是否存在问题? 怎么了?

1 个答案:

答案 0 :(得分:0)

我解决了这个问题,在填写DataTable之前,我将theadtbody标记清空到每个新加载。

代码:

 $('thead').html("");
 $('tbody').html("");