数据表自定义行答案

【问题标题】：Datatable customize row数据表自定义行
【发布时间】：2015-07-19 05:40:05
【问题描述】：

我想自定义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");
});

【问题讨论】：

你从服务器得到什么作为响应？
这不是一个好方法，你应该使用ajax源数据和colums.render看看这里datatables.net/examples/data_sources/ajax.html和这里datatables.net/reference/option/columns.render

标签： javascript jquery datatables

【解决方案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' }
   ]
});

【讨论】：

【解决方案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());
}

【讨论】：