Showing 0 to 0 of 0 entries in DataTable

Question

Hi I am new and i am using dataTable to display my, mysql data.So My Data are display correctly but here my dataTable footer doesn't work correctly.

Here is my code

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

This is the table in blade file.

<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>

this is the laravel controller

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

This is response json [{"id":39,"CO_COMCODE":"FFDE","CO_NAME":"dsfsdf","Address":"‌​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‌​f,dsffdsf,fdsfsd","C‌​O_TELNO":"123456789"‌​,"CO_FAXNO":"1234567‌​89"}]

This is My Output page

This is the response

JSon Response preview and JSon Response

Answer 1

After many efforts, I fixed error

Issues was with applying dataTable plugin. After I remove that js file and add new 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'}
               ]
           }
       } );