2015-01-20 6 views
7

vorrei fare questo:Come utilizzare un oggetto JSON locale con angolari-datatables

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

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

con il modulo angolare DataTable. Ho provato questo:

controller

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

View

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

Ma non funziona affatto, e ottengo questo messaggio di errore:

Avviso

DataTables: tabella id = DataTables_Table_0 - Errore Ajax. Per ulteriori informazioni su questo errore, vedere http://datatables.net/tn/7

Inoltre, non posso utilizzare tutte le opzioni Ajax per ottenere i dati JSON da un URL, perché il mio progetto angularjs utilizza Express e l'API REST, in modo da ottenere 401 non errore autorizzato durante il tentativo di ottenere i miei dati con un URL GET/POST come "/ api/data/getJsonData".

Qualche idea? Grazie.

risposta

10

Non è possibile utilizzare .fromSource come sempre farà una richiesta ajaxUrl. Ma puoi usare .fromFnPromise() invece. Metti il ​​tuo JSON in una funzione che restituisce una promozione posticipata.

+0

Puoi mostrare un po 'di codice su come possiamo farlo in funzione? –

15

Ho avuto un problema simile all'OP e la risposta di Mica è stata molto utile per indicarmi la giusta direzione. La soluzione che ho usato è stato il seguente:

var getTableData = function() { 
    var deferred = $q.defer(); 
    deferred.resolve(myTableDataObject); 
    return deferred.promise; 
}; 

quindi utilizzare tale nella DTOptionsBuilder:

$scope.dtOptions = DTOptionsBuilder.fromFnPromise(getTableData) 
    .withPaginationType('full_numbers'); 

Sono abbastanza nuovo per angolare, e in effetti JavaScript, quindi ci può essere un più elegante/modo corretto di farlo, ma ha funzionato per me.

+1

HEllo. esattamente cosa intendi con * myTableDataObject *. È l'oggetto javascript? – jasmo2

+1

@ jasmo2 - sì, l'oggetto dati che stai cercando di caricare nella tabella. Quindi nel PO sarebbe 'testdata'. Questo è da un vecchio progetto, quindi ho dovuto cercarlo nuovamente per ricordare a me stesso e sembra che ho fatto un errore e dovrei passare la funzione stessa invece di chiamarla. Modificheremo la risposta di conseguenza, ma sentitevi liberi di modificarlo in base alla vostra esperienza. – danj1974