Datatable jquery + ajax + php无法获取表中的数据（服务器端处理）

Question

我在这个例子中使用数据表https://datatables.net/examples/data_sources/server_side.html

所以我的表是：

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

我的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",
    });

我的ajax返回：

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

我的问题是，我总是得到“表格中没有数据”作为表格结果。 但是你可以看到ajax有一些结果（在这个例子中为1）。 看来我的代码与官方示例中的代码相同。

无法理解为什么数据没有显示在表格中（我在浏览器控制台中没有错误）。

Answer 1

您使用的是动态加载还是任何类型的路由？ 例如angularjs ngroute或某些框架。

在这种情况下，它就无法工作（不是您正在做的那样）。 您可以遵循这样的指南或此类示例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);
        }

    }
]);

或只是动态创建表（.load jquery可能有用）