如何告诉dataTables检查骨干集合中的更新数据?

时间:2022-12-06 07:31:14

I am working on integrating backbone.js with dataTables.

我正在努力将backbone.js与dataTables集成。

I have a jsfiddle here: http://jsfiddle.net/mwagner72/ekgZk/17/

我在这里有一个jsfiddle:http://jsfiddle.net/mwagner72/ekgZk/17/

So far I think I am closest with this setup:

到目前为止,我认为我最接近这个设置:

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

This is using my collection as the data source for my dataTable.

这是使用我的集合作为我的dataTable的数据源。

My Question:

我的问题:

How do I tell dataTables to check for updated data in the collection?

如何告诉dataTables检查集合中的更新数据?

2 个解决方案

#1


14  

So I figured out the answer with some help from the allen over on the jquery dataTables site. the trick is to use fnReloadAjax() which will redraw your datatable based off of the collection again.

所以我在alqu的帮助下找到了答案,在jquery dataTables网站上。诀窍是使用fnReloadAjax(),它将再次基于集合重绘您的数据表。

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

I have a jsfiddle located here: http://jsfiddle.net/mwagner72/ekgZk/

我在这里有一个jsfiddle:http://jsfiddle.net/mwagner72/ekgZk/

#2


3  

You should build a Backbone.View that points to your datatables instance and is associated with your chapters collection. You can use the render function of the view to read from the collection and repopulate the grid. Also, you can bind the "change" event on the collection to trigger the render function of the view, so your collection and your view will be kept in sync.

您应该构建一个指向您的datatables实例的Backbone.View,并与您的章节集合相关联。您可以使用视图的渲染功能从集合中读取并重新填充网格。此外,您可以绑定集合上的“更改”事件以触发视图的呈现功能,因此您的集合和视图将保持同步。

#1


14  

So I figured out the answer with some help from the allen over on the jquery dataTables site. the trick is to use fnReloadAjax() which will redraw your datatable based off of the collection again.

所以我在alqu的帮助下找到了答案,在jquery dataTables网站上。诀窍是使用fnReloadAjax(),它将再次基于集合重绘您的数据表。

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

I have a jsfiddle located here: http://jsfiddle.net/mwagner72/ekgZk/

我在这里有一个jsfiddle:http://jsfiddle.net/mwagner72/ekgZk/

#2


3  

You should build a Backbone.View that points to your datatables instance and is associated with your chapters collection. You can use the render function of the view to read from the collection and repopulate the grid. Also, you can bind the "change" event on the collection to trigger the render function of the view, so your collection and your view will be kept in sync.

您应该构建一个指向您的datatables实例的Backbone.View,并与您的章节集合相关联。您可以使用视图的渲染功能从集合中读取并重新填充网格。此外,您可以绑定集合上的“更改”事件以触发视图的呈现功能,因此您的集合和视图将保持同步。