數據表自定義行

Question

我想自定義jQuery的數據錶行，而數據來自阿賈克斯來源，但我很困惑。

表始終顯示消息「無表可用的數據」。

這是我的源：

// table kabupaten 
var tblRow =""; 
var kabupaten = $('#tabel_kabupaten').DataTable(); 

// data table kabupaten 
$.getJSON('datakabupaten', function(a) { 

    $.each(a.data, function(i, datas) { 
    tblRow += "<tr>" 
       +"<td>"+(i+1)+ "</td>" 
       +"<td>"+datas.nama_kabupaten+ "</td>" 
       +"<td>"+datas.keterangan+ "</td>" 
       +"</tr>"; 

    }); 
    $(tblRow).appendTo("#tabel_kabupaten tbody"); 
}); 

Answer 1

您應該使用ajax和columns.render選項的更好方法。

改爲使用下面的代碼。

var kabupaten = $('#tabel_kabupaten').DataTable({ 
    'ajax': 'datakabupaten', 
    'columns': [ 
     { 
     'data': null, 
     'render': function(data, type, full, meta){ 
      return (meta.row + 1); 
     } 
     }, 
     { 'data': 'nama_kabupaten' }, 
     { 'data': 'keterangan' } 
    ] 
}); 

Answer 2

我只是需要呈現自定義行，因爲我的每一行都顯示爲表格。這可能會導致問題，這取決於您在數據表中使用的功能，但是對於我所需要的功能而言，它工作得很好。

我也隱藏標題。

我用createdRow搶行，並把我自己的模板了。

"createdRow": function (row, data, dataIndex) { 
    var table = [ 
     '<td style="padding: 1px;">', 
      '<table class="table clickable" id="' + data.ID + '" style="margin-bottom: 0px;">', 
       '<tr>', 
        '<td>Facility:</td> ', 
        '<td>' + data.Facility + '</td>', 
        '<td>Person:</td>', 
        '<td>' + data.Person+ '</td>', 
       '</tr>', 
       '<tr>', 
        '<td>Created:</td> ', 
        '<td>' + data.Created + '</td>', 
        '<td>Phone:</td>', 
        '<td>' + data.Phone+ '</td>', 
       '</tr>', 
       '<tr>', 
        '<td>Status:</td> ', 
        '<td>' + data.Status+ '</td>', 
        '<td>Expected:</td>', 
        '<td>' + data.Expected + '</td>', 
       '</tr>', 
       // ..etc etc etc 
      '</table>', 
     '</td>' 
    ].join("\n"); 
    //wrap it since I need the starting parent element 
    $(row).html($(table).wrap("<div>").parent().html()); 
}