在DataTable中显示0到0的0个条目

Question

您好我是新手，我正在使用 dataTable 来显示我的 mysql数据。所以我的数据显示正确，但我的dataTable页脚没有工作正常。

这是我的代码

UI_CRUD.prototype.refreshTable = function(params = {}){
    var tableBody = $('.view-datatable tbody');
    var dataUrl = this.moduleURL+'/alenter code herel';
    var title = this.moduleTitle;
    // console.log(this.moduleTitle);
    console.log('all ..');
    $.ajax({
        url: dataUrl,
        data : params,
    })
    .done(function(data) {
        var html = '';
            $.each(data, function(index, item) {
                 html+= '<tr>';
                    $.each(item, function(index, data) {
                        (index != 'id') ? html+= '<td>'+data+'</td>' : html+=''; 
                    });
                    html+= '<td class="actions">' +
                                '<i class="icon-eye text-primary view-btn" data-id="'+item.id+'">'+
                                '</i>'+
                                '<span></span>'+
                                '<i class="icon-pencil7 text-primary edit-btn" data-id="'+item.id+'">' +
                                '</i>'+
                                '<span></span>'+
                                '<i class="icon-bin sweet_combine text-danger delete-btn" data-id="'+item.id+'">' +
                                '</i>'+
                            '</td>';
                 html+= '</tr>';

            });
        tableBody.html(html);
    })
    .fail(function(res) {
        console.error(res,'UI_CRUD ERR : ');
    }); 
}

这是刀片文件中的表格。

<table class="table view-datatable" id="mytable">
        <thead>
            <tr>
                <th>Company Code              </th>
                <th>Company Name              </th>
                <th>Company Address           </th>
                <th>Telephone No.             </th>
                <th>Fax No.                   </th>

                <th style="text-align: center;">Actions</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

这是laravel控制器

public function getAll()
    {
        $company = $this->getCompanies();
        return response()->json($company,200);
    }


public function getCompanies()
    {
        $company = Company::select("id", "CO_COMCODE", "CO_NAME",
            DB::raw("CONCAT(CO_ADD1, ',', CO_ADD2, ',', CO_ADD3, ',', CO_ADD4)  AS Address"),
            "CO_TELNO", "CO_FAXNO")
            ->get();

        return $company;
    }

这是响应json  [{ “ID”：39， “CO_COMCODE”： “FFDE”， “CO_NAME”： “dsfsdf”， “地址”： “fsdfsd，fsdf，fdsf，FSD F”， “CO_TELNO”：“12345 6789 “ ”CO_FAXNO“： ”12 3456789“}，{ ”ID“：41， ”CO_COMCODE“： ”AAAA“， ”CO_NAME“： ”fdfdsf“， ”A ddress“：” dsfdsf，DFDS女，dsffdsf，fdsfsd”， “C O_TELNO”： “123456789”， “CO_FAXNO”： “1234567 89”}]

这是我的输出页面

这是回复

JSon Response preview和 JSon Response

Answer 1

经过多方努力，我修正了错误

问题在于应用dataTable插件。删除该js文件并添加新的dataTable后。

<table class="table view-datatable">
    <thead>
        <tr>
            <th>Company Code              </th>
            <th>Company Name              </th>
            <th>Company Address           </th>
            <th>Telephone No.             </th>
            <th>Fax No.                   </th>
        </tr>
    </thead>
    <tbody></tbody>

var table = $('.view-datatable').DataTable( {
           "processing" : true,
           "retrieve": true,
           "ajax" : {
               "url" : ajax_url
           },
           "columns" : [  {
               "data" : "CO_COMCODE"
           }, {
               "data" : "CO_NAME"
           }, {
               "data" : "Address"
           }, {
               "data" : "CO_TELNO"
           }, {
               "data" : "CO_FAXNO"
           }, {
               data: null,
               className: "dataTable-center",
           },],
           "rowCallback": function( row, data, index ) {
               $('td:eq(5)', row).html(
                   '<i class="icon-eye text-primary view-btn" data-id="'+data.id+'">'+
                   '</i>'+
                   '<span>    </span>'+
                   '<i class="icon-pencil7 text-primary edit-btn" data-id="'+data.id+'">' +
                   '</i>'+
                   '<span>    </span>'+
                   '<i class="icon-bin sweet_combine text-danger delete-btn" data-id="'+data.id+'">' +
                   '</i>'
               );
           },
           "pagingType": "full_numbers",
           buttons: {
               buttons: [
                   {
                       extend: 'colvis',
                       className: 'btn btn-default'
                   },
                   {
                       text: 'Add New',
                       className: 'add-new btn bg-blue-800 ui-add-new',
                       action: function(e) {
                           // UI_addModel('show');
                       }
                   },
                   {extend: 'copy'},
                   // {extend: 'csv'},
                   {extend: 'excel'},
                   {extend: 'pdf'},
                   {extend: 'print'}
               ]
           }
       } );