Question

我想自定义jQuery DataTables行，数据来自Ajax源，但我很困惑。

该表始终显示消息“表格中没有可用数据”。

这是我的来源：

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

数据表自定义行

2 个答案: