dataTables / Backbone / rowReordering plugin
dataTables / Backbone / rowReordering plugin
mwagner72
Posts: 5Questions: 0Answers: 0
I have been implementing backbone with data tables:
[code]
var Chapter = Backbone.Model;
var chapters = new Backbone.Collection();
chapters.add(new Chapter({ id: 3, page: 9, title: "The End"}));
chapters.add(new Chapter({ id: 2, page: 5, title: "The Middle"}));
chapters.add(new Chapter({ id: 1, page: 1, title: "The Beginning"}));
$('#table_id_3').dataTable({
"aoColumns": [
{ "sTitle": "ID", "mDataProp": function( source, type, val ) {
return source.get('id');
} },
{ "sTitle": "Title", "mDataProp": function( source, type, val ) {
return source.get('title');
} },
{ "sTitle": "Page #", "mDataProp": function( source, type, val ) {
return source.get('page');
} }],
sAjaxSource: "",
sAjaxDataProp: "",
fnServerData: function( sSource, aoData, fnCallback ){
console.log(chapters.models);
fnCallback(chapters.models);
},
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
var id = aData.get('id');
console.log(id)
$(nRow).attr("id", id);
}
}).rowReordering();
chapters.add(new Chapter({id: 4,page: 4, title: "The next bunny"}));
var oTable3 = $('#table_id_3').dataTable();
oTable3.fnReloadAjax();
[/code]
Now I want to take it farther and integrate reordering.
My question is:
Is there a way to access the objects that I have passed into fsServerData for each row later?
so that inside the rowReordering I can update the order attribute on the model.
[code]
var Chapter = Backbone.Model;
var chapters = new Backbone.Collection();
chapters.add(new Chapter({ id: 3, page: 9, title: "The End"}));
chapters.add(new Chapter({ id: 2, page: 5, title: "The Middle"}));
chapters.add(new Chapter({ id: 1, page: 1, title: "The Beginning"}));
$('#table_id_3').dataTable({
"aoColumns": [
{ "sTitle": "ID", "mDataProp": function( source, type, val ) {
return source.get('id');
} },
{ "sTitle": "Title", "mDataProp": function( source, type, val ) {
return source.get('title');
} },
{ "sTitle": "Page #", "mDataProp": function( source, type, val ) {
return source.get('page');
} }],
sAjaxSource: "",
sAjaxDataProp: "",
fnServerData: function( sSource, aoData, fnCallback ){
console.log(chapters.models);
fnCallback(chapters.models);
},
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
var id = aData.get('id');
console.log(id)
$(nRow).attr("id", id);
}
}).rowReordering();
chapters.add(new Chapter({id: 4,page: 4, title: "The next bunny"}));
var oTable3 = $('#table_id_3').dataTable();
oTable3.fnReloadAjax();
[/code]
Now I want to take it farther and integrate reordering.
My question is:
Is there a way to access the objects that I have passed into fsServerData for each row later?
so that inside the rowReordering I can update the order attribute on the model.
This discussion has been closed.
Replies
Would that present a problem in this case? I've been thinking about adding an override option to stop this from happening (or even altering it so it doesn't happen at all - the reason it does do that at the moment is because fnRender can change the value of the data object - if it happens to be used).
Allan
Thanks for your response and support, you are incredible!!! In this case, I do think it would cause a problem since fnReloadAjax is pulling the backbone models from the backbone collection, to render the table data (if I understand it correctly). So in my version of the rowReordering plugin I would be updating those models to persist my new ordering, and that way the next fnReloadAjax would not overwrite those changes.
I'm in a bit of a different situation then most people seem to be doing with backbone, since I am not saving back to the server on every change. I only save to the server once all the changes have been finished.
It would be great if we could override the using a cloned object.
Once again thanks for your Response and support!!!!
Mark
Try this - this is the line(s) that I think are tripping you up: https://github.com/DataTables/DataTables/blob/master/media/js/jquery.dataTables.js#L442 - if you replace:
[code]
var aDataIn = ($.isArray(aDataSupplied)) ?
aDataSupplied.slice() :
$.extend( true, {}, aDataSupplied );
[/code]
with:
[code]
var aDataIn = aDataSupplied;
[/code]
how does that go for you?
Allan