具有ajax函数的Angular DataTable- $ http

Question

我在Angular中使用ajax 创建 数据表。

代码：

property file

HTML代码：

app.controller('WithAjaxCtrl', WithAjaxCtrl);

function WithAjaxCtrl($scope,DTOptionsBuilder, DTColumnBuilder,$http) {

    $scope.dateFrom = {value:new Date()}
    $scope.dateTo ={value:new Date()}

//the http success callback return the data
        var successCallback = function (data, status, headers, config) {
            return data;
        }

//the http error callback 
    var errorCallback = function (data, status, headers, config) {
       alert('fail with status '+status)
    }

//The http fuction
        var getRecord = function () {
            var from =  $scope.dateFrom.value;
            var to = $scope.dateTo.value;
            $http.post('/loadRecord/'+from+'/'+to)
                .success(successCallback).error(errorCallback)
        }

//The data tables function
        $scope.filterByDate=function(){
            vm.dtOptions = DTOptionsBuilder.fromSource(getRecord())
                .withPaginationType('full_numbers');
        }

    var vm = this;
    var from =  $scope.dateFrom.value;
    var to = $scope.dateTo.value;
    vm.dtOptions = DTOptionsBuilder.fromSource(getRecord())
        .withPaginationType('full_numbers').withOption('responsive', true);
    vm.dtColumns = [
        DTColumnBuilder.newColumn('xxxx').withTitle('XXXX),
        DTColumnBuilder.newColumn('yyy').withTitle('YYY),

    ];

}

$ http调用成功。

但没有任何东西进入桌面！

我认为该功能没有任何回报，但我不知道我可以将返回与数据放在哪里。

Answer 1

您通常会像这样构建选项

vm.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers').withDisplayLength(2);
vm.dtColumnDefs = [
    DTColumnDefBuilder.newColumnDef(0),
    DTColumnDefBuilder.newColumnDef(1).notVisible(),
    DTColumnDefBuilder.newColumnDef(2).notSortable()
];

然后使用$http调用

检索需要传递到表的数据

$http.post(url,params).then(function success(response) {
                $scope.data = response.data;
            });

最后使用ngRepeat创建表

<tr ng-repeat="obj in data">
        <td>{{ obj.id }}</td>
        <td>{{ obj.xxxx }}</td>
        <td>{{ obj.yyyy }}</td>
    </tr>

请记住在ctrl

中的最后一个语句中修复字符串文字

vm.dtColumns = [
    DTColumnBuilder.newColumn('xxxx').withTitle('XXXX),
    DTColumnBuilder.newColumn('yyy').withTitle('YYY),

];

此处'XXXX应'XXXX'

类似的例子在数据docs

中