Come si comunica a dataTables la ricerca di dati aggiornati in una raccolta backbone?

Question

Sto lavorando per l'integrazione di backbone.js con dataTables.

ho un jsfiddle qui: http://jsfiddle.net/mwagner72/ekgZk/17/

Finora penso di essere più vicino con questa configurazione:

var Chapter = Backbone.Model; 
var chapters = new Backbone.Collection(); 

chapters.add(new Chapter({ page: 9, title: "The End" })); 
chapters.add(new Chapter({ page: 5, title: "The Middle" })); 
chapters.add(new Chapter({ page: 1, title: "The Beginning" })); 

$('#table_id_3').dataTable({ 
    "aoColumns": [ 
     {"sTitle": "Title", "mDataProp": "title"}, 
     {"sTitle": "Page #","mDataProp": "page"}], 
    sAjaxSource: "", 
    sAjaxDataProp: "", 
    fnServerData: function(sSource, aoData, fnCallback) { 
     console.log('here we go'); 
     fnCallback(chapters.toJSON()); 
    } 
}); 

Questo sta usando la mia collezione come origine dati per il mio dataTable.

La mia domanda:

Come faccio a dire DataTable per verificare la presenza di dati aggiornati della collezione?

Answer 1

Quindi ho trovato la risposta con l'aiuto di Allen sul sito di jquery DataTables. il trucco è usare fnReloadAjax() che ridisegnerà il tuo datatable basandosi nuovamente sulla raccolta.

$('#table_id_3').dataTable({ 
    "aoColumns": [ 
     { "sTitle": "Title", "mDataProp": "title" }, 
     { "sTitle": "Page #", "mDataProp": "page" }], 
    sAjaxSource: "", 
    sAjaxDataProp: "", 
    fnServerData: function(sSource, aoData, fnCallback){ 
     console.log(chapters.toJSON()); 
     fnCallback(chapters.toJSON()); 
    } 
}); 

chapters.add(new Chapter({page: 4, title: "The next bunny"})); 

var oTable3 = $('#table_id_3').dataTable(); 
oTable3.fnReloadAjax(); 

ho un jsfiddle trova qui: http://jsfiddle.net/mwagner72/ekgZk/

Answer 2

È consigliabile creare una Backbone.View che punta all'istanza dei database dati ed è associata alla raccolta dei capitoli. È possibile utilizzare la funzione di rendering della vista per leggere dalla raccolta e ripopolare la griglia. Inoltre, puoi associare l'evento "change" alla raccolta per attivare la funzione di rendering della vista, quindi la tua raccolta e la tua vista verranno mantenute sincronizzate.