Question

我正在使用Datatabls通过Ajax显示表数据。但是有时候列名是不同的。所以我从服务器的数组列表中获取了json数据。现在使用空的thead，并希望在其中放置实际的列名。

我的JS：

$('#DTable').DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": {
        "url": "data.php",
        "type": "POST",
        "dataType": "json",
        "dataSrc": "data"
    }
});

我的JSON：

{
"col": [
    "A",
    "B",
    "C",
    "D",
    "E"
],
"data": [
    [
        "Umn(i4(5P~",
        "wA~W70Vtmj",
        "^taMfGgmKC",
        "klPx6XrZR*",
        "H6ooRlotEB"
    ],
    [
        "DrUE)Z234C",
        "udN2BJOSpn",
        "GWjU3~*hbr",
        "IFIk1t1!m(",
        "kH*Yypo5)E"
    ],
    [
              .........
    ]
]}

假设我需要使用：

        "dataFilter": function(res) {
            res.col.....
        }

和

"columnDefs": [
      { "title": "My custom title", "targets": 0 }
]

但是我的数据奇怪的不是json数据类型，而且我无法使用res.col列出并放置它们，而且也不知道该怎么精确。...

Answer 1

好。我找到了解决方案。也许不是最好的，但是可以正常工作。

// First call standard ajax request for getting column names
$.ajax({
    url: "data.php",
    type: "POST",
    dataType: "json",
    success: function(res) {

        //put column names into thead
        $('#DTable thead tr').empty();
        var cols=res.col;
        for (var i=0; i<cols.length; i++) {
            $('#DTable thead tr').append('<th>'+cols[i]+'</th>');
        }

        // initialise Datatable
        $('#DTable').DataTable({
            processing: true,
            serverSide: true,
            deferRender: true,
            ajax: {
                url: "data.php",
                type: "POST",
                dataType: "json",
                dataSrc: "data"
            }
        });
    }
});

Datatable.js从JSON数据动态设置列标题

1 个答案: