如何使用具有angular-datatables的本地JSON对象

Ala*_*rid 7 datatables angularjs

我想这样做:

testdata = [{"id":"58",...}]; // local object

$('#test').dataTable({
    "aaData": testdata,
    "aoColumns": [
        { "mDataProp": "id" }
    ] });
Run Code Online (Sandbox Code Playgroud)

使用angular-datatables模块.我试过这个:

调节器

$scope.dtOptions = DTOptionsBuilder.fromSource('[{"id": 1}]')
        .withDataProp('data')
        .withBootstrap()
        .withPaginationType('full_numbers');
$scope.dtColumns = [
        DTColumnBuilder.newColumn('id').withTitle('ID')
];
Run Code Online (Sandbox Code Playgroud)

视图

<table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-striped table-bordered"></table>
Run Code Online (Sandbox Code Playgroud)

但它根本不起作用,我收到此错误消息:

DataTables警告:table id = DataTables_Table_0 - Ajax错误.有关此错误的更多信息,请参阅http://datatables.net/tn/7

另外,我不能使用任何Ajax选项从URL获取json数据,因为我的angularjs项目使用Express和Rest API,所以在尝试使用GET/POST URL获取数据时,我得到401未授权错误/ API /数据/ getJsonData".

有任何想法吗 ?谢谢.

dan*_*974 15

我对OP有类似的问题,而Mica的回答非常有助于我指出正确的方向.我使用的解决方案如下:

var getTableData = function() {
    var deferred = $q.defer();
    deferred.resolve(myTableDataObject); 
    return deferred.promise;
};
Run Code Online (Sandbox Code Playgroud)

然后在DTOptionsBuilder中使用它:

$scope.dtOptions = DTOptionsBuilder.fromFnPromise(getTableData)
    .withPaginationType('full_numbers');
Run Code Online (Sandbox Code Playgroud)

我对Angular很新,而且确实是JavaScript,所以可能有一种更优雅/更正确的方法,但它对我有用.


小智 10

您不能使用.fromSource,因为它始终会执行ajaxUrl请求.但您可以使用.fromFnPromise()代替.将您的JSON放入一个返回deferred.promise的函数中.