繁体   English   中英

如何动态地向DataTables添加列?

[英]How to add columns dynamically to DataTables?

我想在DataTables中动态添加列。

我用数据表标题的值检索一个数组。 对于第一列,我什么也不想要,然后将值放入数组中。

我使用Ajax在allyearstat11中检索DataTables标题的值。

这是我的JavaScript代码:

function getStatistic11() {

var response;
var allstat11 = [];
var allyearstat11 = [];
var nbY = 20;

$.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++;
            }                
        }
        for (var k = 0; k <= nbY; k++) {
            allyearstat11[k] = response.Items[0].YearStart + k;
        }
        fillDataTable11(allstat11, allyearstat11);

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

这是我的Javascript代码,可以填充DataTables,效果很好,但可以手动进行

function fillDataTable11(data, allyearstat11) {

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

$('#table_statistic_11').dataTable({

    'aaData': data,
    'aoColumns': [
        { "sTitle": "", "sCellType": "th", "fnCreatedCell": function (cell) { cell.scope = 'row'; } },
        { "sTitle": allyearstat11[0] },
        { "sTitle": allyearstat11[1] },
        { "sTitle": allyearstat11[2] },
        { "sTitle": allyearstat11[3] },
        { "sTitle": allyearstat11[4] },
        { "sTitle": allyearstat11[5] },
        { "sTitle": allyearstat11[6] },
        { "sTitle": allyearstat11[7] },
        { "sTitle": allyearstat11[8] },
        { "sTitle": allyearstat11[9] },
        { "sTitle": allyearstat11[10] },
        { "sTitle": allyearstat11[11] },
        { "sTitle": allyearstat11[12] },
        { "sTitle": allyearstat11[13] },
        { "sTitle": allyearstat11[14] },
        { "sTitle": allyearstat11[15] },
        { "sTitle": allyearstat11[16] },
        { "sTitle": allyearstat11[17] },
        { "sTitle": allyearstat11[18] },
        { "sTitle": allyearstat11[19] },
        { "sTitle": allyearstat11[20] }
    ],

    "iDisplayLength": 12,
    "bJQueryUI": true,
    "bDestroy": true,
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": false,
    "bSort": false,
    "bInfo": false,
    "bAutoWidth": false
});
}

我可以在“ aoColumns”中使用for循环吗? 我该怎么办 ?

我解决了这个问题:

var tabTitleColumn = [];

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

之后 :

'aoColumns': tabTitleColumn 

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM