2012-02-27 4 views
9

Pracuję nad integracją backbone.js z DataTables.Jak powiadomić tabelę danych, aby sprawdzały dostępność zaktualizowanych danych w kolekcji kręgosłupa?

Mam jsfiddle tutaj: http://jsfiddle.net/mwagner72/ekgZk/17/

tej pory myślę, że jestem najbliżej z tej konfiguracji:

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()); 
    } 
}); 

to używając moją kolekcję jako źródło danych dla mojego DataTable.

Moje pytanie:

Jak mogę powiedzieć DataTables w celu sprawdzenia aktualnych danych w kolekcji?

Odpowiedz

14

Więc znalazłem odpowiedź z pomocą od użytkownika allen na stronie jquery dataTables. Sztuką jest użycie fnReloadAjax(), które ponownie odświeży twoje datatable na podstawie kolekcji.

$('#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(); 

Mam jsfiddle znaleźć tutaj: http://jsfiddle.net/mwagner72/ekgZk/

+2

To działa, ale jeśli ktoś jest trochę podobny do mnie i nigdy nie miał spojrzeć na skrzypcach, funkcja fnReloadAjax jest plugin od http: // datatables.net/plug-ins/api (Przynajmniej nie było to dla mnie jasne) – ivarni

3

Powinieneś zbudować Backbone.View, który wskazuje na instancję datatables i jest powiązany z kolekcją rozdziałów. Możesz użyć funkcji renderowania widoku, aby odczytać z kolekcji i ponownie zaludnić tabelę. Ponadto można powiązać zdarzenie "change" w kolekcji, aby uruchomić funkcję renderowania widoku, aby kolekcja i widok były synchronizowane.

Powiązane problemy