Datatable jquery + ajax + php can't get data in table (Server-side processing)

Question

I'm using datatable following this example https://datatables.net/examples/data_sources/server_side.html

So my table is:

<table cellpadding="0" cellspacing="0" border="0" class="display" id="tabellaGlossario">
    <thead>
        <th>
             <td>Voce</td>
             <td>Sinonimi</td>
             <td>Sigla</td>
             <td>Macrosettore</td>
             <td>Microsettore</td>      
             <td>Sinonimi</td>
             <td>Sigla</td>
             <td>Macrosettore</td>
             <td>Microsettore</td>           
        </th>
    </thead>
    <tfoot>
        <th>
             <td>Voce</td>
             <td>Sinonimi</td>
             <td>Sigla</td>
             <td>Macrosettore</td>
             <td>Microsettore</td>      
             <td>Sinonimi</td>
             <td>Sigla</td>
             <td>Macrosettore</td>
             <td>Microsettore</td>           
        </th>
    </tfoot>
</table>

My js:

oTable = $('#tabellaGlossario').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "sDom": '<""f>t<"F"lp>',
        "processing": true,
        "serverSide": true,
        "ajax": "Modules/Glossario/View/Glossario.Table.View.php?lingua_select=2",
    });

My ajax returned:

{
  "draw": 1,
  "recordsTotal": 1,
  "recordsFiltered": 1,
  "data": [
    [
      "1",
      "2",
      "1",
      "1",
      "1",
      "Parola italiana",
      "Sinonimo italiano",
      "Sigla ita",
      "Note ita"
    ]
  ]
}

My problem is that i always get "No data available in table" as table results. But as you can see ajax has some results (1 in this example). It seems my code is the same as the one in official example.

Can't understand why data are not showed in table (and i get no error in browser console).

Answer 1

Are you using some dynamic loading or any kind of routing? For example angularjs ngroute or some framework's.

In that case it can't work (not as you're doing). You can follow some guide like this or example like this http://jsfiddle.net/qu4a7j24/3/

<div ng-app='testTableApp'>

    <div class="container">
        <div ng-controller="mainTable">
            <form action="" method="POST" class="form-horizontal" role="form">
                <div class="form-group">
                    <legend>Filters</legend>
                </div>
                <div class="form-group">
                    <div class="col-sm-10 col-sm-offset-2">
                        <input type="text" value="0" ng-change='reloadData()' ng-model="start">
                        <input type="text" value="50" ng-change='reloadData()' ng-model="end">

                    </div>
                </div>
            </form>

            <table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-striped table-bordered"></table>
        </div>
    </div>
</div>

var testTableApp = angular.module( 'testTableApp', ['ngRoute', 'ngResource', 'datatables', 'datatables.tabletools', 'datatables.bootstrap', 'datatables.fixedheader'] );
console.log( testTableApp );
testTableApp.controller("mainTable", 
[ '$scope', 'DTOptionsBuilder', 'DTColumnBuilder',
    function ( $scope, DTOptionsBuilder, DTColumnBuilder){
        $scope.dataSource = "http://dt.ishraf.com/ajax.php";
        $scope.start = 0;
        $scope.end = 5000;


        $scope.getDataSource = function(obj,prefix){
            var src = $scope.dataSource;

            var str = [];
            for(var p in obj) {
                if (obj.hasOwnProperty(p)) {
                    var k = prefix ? prefix + "[" + p + "]" : p, v = obj[p];
                    str.push(typeof v == "object" ?
                    serialize(v, k) :
                    encodeURIComponent(k) + "=" + encodeURIComponent(v));
                }
            }
            return src + "?" + str.join("&");
        }

        var dsParams = {
            start : $scope.start,
            end : $scope.end
        }

        $scope.dsString = $scope.getDataSource( dsParams );


        $scope.buildTable = function(){
            return DTOptionsBuilder
                .newOptions()
                .withOption('ajax', {
                    // Either you specify the AjaxDataProp here
                    dataSrc: 'data',
                    url: $scope.dsString,
                    type: 'POST'
                }).
                withOption( 'lengthMenu', [
                    [10, 20, 50, 100, 150, 300, 500],
                    [10, 20, 50, 100, 150, 300, 500]
                ])                
                .withTableTools('bower_components/datatables-tabletools/swf/copy_csv_xls_pdf.swf')
                .withTableToolsButtons([
                    {
                        "sExtends": "copy",
                        "sButtonText": "<i class='fa fa-copy'></i>&nbsp;|&nbsp;Copy",
                        "fnInit": function (nButton, oConfig) {
                            $(nButton).addClass('btn btn-success');
                        }
                    },
                    {
                        "sExtends": "print",
                        "sButtonText": "<i class='fa fa-print'></i>&nbsp;|&nbsp;Print",
                        "fnInit": function (nButton, oConfig) {
                            $(nButton).addClass('btn btn-danger');
                        }
                    },
                    {
                        "sExtends": "csv",
                        "sButtonText": "<i class='fa fa-file-o'></i>&nbsp;|&nbsp;CSV",
                        "fnInit": function (nButton, oConfig) {
                            $(nButton).addClass('btn btn-primary');
                        }
                    },
                    {
                        "sExtends": "pdf",
                        "sButtonText": "<i class='fa fa-file-pdf-o'></i>&nbsp;|&nbsp;PDF",
                        "fnInit": function (nButton, oConfig) {
                            $(nButton).addClass('btn btn-warning');
                        }
                    }
                ])
                .withFixedHeader({
                    bottom: true
                })
                .withDOM('<"clear"><"#top.hidden-print"<".row"<".col-md-6"i><".col-md-6"f>><".row"<".col-md-6"l><".col-md-6"p>><"clear">T>rt')
                ;            
        }


        $scope.dtOptions = $scope.buildTable();

        $scope.buildColumns = function(){
            return [
                DTColumnBuilder.newColumn('id').withTitle('ID'),
                DTColumnBuilder.newColumn('firstName').withTitle('First name'),
                DTColumnBuilder.newColumn('lastName').withTitle('Last name'),
                DTColumnBuilder.newColumn('city').withTitle('city'),
                DTColumnBuilder.newColumn('state').withTitle('state'),
                DTColumnBuilder.newColumn('zip').withTitle('zip'),
                DTColumnBuilder.newColumn('country').withTitle('country'),
                DTColumnBuilder.newColumn('phone').withTitle('phone'),
                DTColumnBuilder.newColumn('email').withTitle('email')
            ];
        }

        $scope.dtColumns = $scope.buildColumns();


        $scope.reloadData = reloadData;
        $scope.dtInstance = {};

        function reloadData() {
            var resetPaging = false;
            $scope.dtInstance.reloadData(callback, resetPaging);
        }

        function callback(json) {
            console.log(json);
        }

    }
]);

or just dynamic create the table (.load jquery can be useful)