数据表不使用5列或更少列

时间:2017-03-02 11:22:12

标签: jquery ajax laravel datatables

我一直在Laravel 5.2项目中使用Datatables插件。

我用jQuery和Ajax发布表格。

这是我的HTML表格:

<table id="entidadeTable" class="table">
     <thead>
        <tr>
           <th>ID</th>
           <th>Nome</th>
           <th>Descrição</th>
           <th>Ações</th>
        </tr>
     </thead>
</table>

然后我通过Datatable实例化表:

var entidadeTable = $('#entidadeTable').DataTable({
    "language": {
        "url":"//cdn.datatables.net/plugins/9dcbecd42ad/i18n/Portuguese.json"
    },
    "order": [[0, "desc"]],
    "ajax": {
         "method": "POST",
         "url": "{{ route('getTabelaEntidades') }}",
         "data": {_token: "{{ Session::token() }}"}
    },
    "columns": [
         {"data": "id"},
         {"data": "nome"},
         {"data": "descricao"},
         {"data": "actions"}
    ],
});

这是我的控制器代码,负责将数据传输到数据表:

$entidades = Entidade::all();

return response()->json(['draw' => 1, 'recordsTotal' => $entidades->count(),
            'recordsFiltered' => $entidades->count(), 'data' => $entidades]);

但我收到此数据表错误:

https://www.datatables.net/manual/tech-notes/4

如果我的表少于6列,我只会收到此错误。 我试图在我的桌子上放置超过5列,然后它工作,错误消失

错误:

DataTables warning: table id=entidadeTable - Requested unknown parameter '4' for row 0, column 4. For more information about this error, please see http://datatables.net/tn/4

2 个答案:

答案 0 :(得分:4)

我添加了此datatables属性,错误消失了

columnDefs: [{ }],

答案 1 :(得分:0)

<强> HTML

<table id="entidadeTable" class="table">
 <thead>
    <tr>
       <th>ID</th>
       <th>Nome</th>
       <th>Descrição</th>
       <th>Ações</th>
    </tr>
 </thead>

返回数据 Laravel会自动返回json类型。

return Entidade::all();

<强>数据表

var entidadeTable = $('#entidadeTable').DataTable({
    "language": {
        "url":"//cdn.datatables.net/plugins/9dcbecd42ad/i18n/Portuguese.json"
    },
    "order": [[0, "desc"]],
    "ajax": {
         "method": "POST",
         "url": "{{ route('getTabelaEntidades') }}",
         "data": {_token: "{{ Session::token() }}"}
    },
    "columns": [
         {"data": "id"},
         {"data": "nome"},
         {"data": "descricao"},
         {"data": null, orderable: false,
                render: function(data , type, row){
                    var html ='<div class="btn-group">'+
                        '           <button type="button" onclick="edit('+row.id+');" class="btn btn-xs btn-info">' +
                        '               <i class="ace-icon fa fa-pencil bigger-130"></i>' +
                        '           </button>' +
                        '       </div>';
                    return html;
                },className: "center"
            }
    ],
});