Javascript 数据表自定义行

我想定制jquerydatatables行，数据来自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");
}); 

//表kabupaten
var tblRow=“”；
var kabupaten=$（'tabelu kabupaten'）。DataTable（）；
//数据表kabupaten
$.getJSON（'datakabupaten'，函数（a）{
$。每个（a.数据，函数（i，数据）{
tblRow+=“”
+“+（i+1）+”
+“”+datas.nama_kabupaten+“”
+“”+datas.keterangan+“”
+"";
}); 
$（待定）。附录（“#tabel_kabupaten tbody”）；
}); 

您应该使用和选项作为更好的方法

请使用以下代码

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

---

我只是需要呈现自定义行，因为我的每一行都显示为一个表。这可能会导致问题，具体取决于您在datatables中使用的功能，但对于我所需要的，它非常有效

我还隐藏了标题

我使用

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

“createdRow”：函数（行、数据、数据索引）{
变量表=[
'',
'',
'',
“设施：”，
''+数据设备+''，
"人",，
''+数据.个人+''，
'',
'',
“已创建：”，
''+数据。创建+''，
"电话:"，
''+数据，电话+''，
'',
'',
“状态：”，
''+数据.状态+''，
“预期：”，
''+数据，预期为+''，
'',
//等等等等等等
'',
''
].加入（“\n”）；
//包装它，因为我需要起始父元素
$（行）.html（$（表）.wrap（“”.parent（）.html（））；
}

你从服务器得到了什么响应？这不是一个好方法，你应该使用

ajax

源数据和

colums.render

看看这里和这里