How to implement DataTables with knockout observables.

Rpiechura · June 2014

@allan So I've seen your post http://datatables.net/forums/discussion/16160/knockout-observables-and-datatables-1-10-pre-beta-feedback-please and the example that you've posted with it. My question is just how much further you've gotten into this and if there is anything new that you can provide that I can take a look at.

I got a proof of concept project working well enough, however now we are really looking into if we still want to use DataTables or go with something else because of the desire for the items being knockout observable objects. The desire is to have an item in the table be updated if a details side panel is changed (which obviously ko observables would do for us) but I'm not sure if it can be done.

Rpiechura · June 2014

I guess this question may be a bit too open ended. I'm looking for more information on making dataTables work with ko observables. The hardest time I've had so far is how supply 'data' with a ko observable array of observable objects and get it to work. If I could figure that out, I imagine I could get my old project to work correctly. However right now I'm failing pretty miserably at getting it to do even the most simple things. Here is an example of the data that is being returned when I make my Ajax call.

taliesins · June 2014

Here is some snippets I am using for knockout 3 and datatable. It binds to changes to observable array and to changes in values of the properties of items in observable array.

Strip out the editor code. Key thing to note is databindFunction

Manage catalogs

Id	Name

<script>
    $(document).ready(function () {
        require(['view.catalogs'],
        function (view) {
            view.render();
        });
    });
</script>

define('view.catalogs', ['vm.catalogs', 'jquery', 'knockout', 'datatables'], function (viewModel, $, ko) { function CatalogsView(viewModel, $, ko){ var self = this; self.viewModel = viewModel; self.editor = null; self.render = function() { var databindFunction = function(dataTable, keyColumn, databoundColumns, changes) { if (changes.length > 0) { changes.forEach(function(change) { if (change.status === 'added') { console.log("The added element is:", change.value); dataTable.row.add(change.value); $.each(databoundColumns, function(i, prop) { change.value[prop].subscribe(function(val) { console.log("The property '" + prop + "' has changed to:", val); var rowIdx = dataTable.column(0).data().indexOf(change.value[keyColumn]); dataTable.row(rowIdx).invalidate().draw(); }); }); } else if (change.status === 'deleted') { console.log("The removed element is:", change.value); var rowIdx = dataTable.column(0).data().indexOf(change.value[keyColumn]); dataTable.row(rowIdx).remove(); } }); dataTable.draw(); } } self.editor = new $.fn.dataTable.Editor({ table: "#CatalogsGrid", fields: [ { label: "Id:", name: "id" }, { label: "Name:", name: "name" } ] }); var dtOptions = { columns: [ { data: 'id'}, { data: 'name()' } ], columnDefs: [ { targets: 0, visible: false, searchable: false } ], tableTools: { sRowSelect: "os", aButtons: [ { sExtends: "editor_create", editor: self.editor }, { sExtends: "editor_edit", editor: self.editor }, { sExtends: "editor_remove", editor: self.editor } ] } } var catalogsGrid = $("#CatalogsGrid").DataTable(dtOptions); self.viewModel.Catalogs.subscribe(function(changes) { databindFunction(catalogsGrid, 'id', ['name'], changes); }, null, "arrayChange"); self.viewModel.Get(); ko.applyBindings(self.viewModel, document.getElementById('content')); }; } return new CatalogsView(viewModel, $, ko); }); define('vm.catalogs', ['dataservice', 'knockout'], function (dataservice, ko) { function CatalogsViewModel(dataservice, ko) { var self = this; /** * Child models */ var Catalog = function (data) { this.id = data; this.name = ko.observable(data); }; /** * Observables */ self.IsUpdating = ko.observable(false); self.Catalogs = ko.observableArray(); /** * Computed Observables */ /** * Actions */ self.mapCatalogs = function (catalogs) { var catalogObjects = []; $.each( catalogs, function( index, value ) { var catalogObject = new Catalog(value); catalogObjects.push(catalogObject); }); self.Catalogs(catalogObjects); } self.Get = function () { dataservice.user.getUser({ success: function (data) { if (data) { self.mapCatalogs(data.Catalogs); } }, error: function (data, status) { console.log("data: " + data); console.log("status: " + status); } }); }; }; return new CatalogsViewModel(dataservice, ko); });

Rpiechura · June 2014

Thanks for the code. We looked over it and it makes sense (more or less) to us. We've decided that we're going to use client side processing and use the datatables stuff to just do some pretty simple styling / display modification instead of trying to get the server side processing to work correctly.

How to implement DataTables with knockout observables.

How to implement DataTables with knockout observables.

Answers

Manage catalogs

Howdy, Stranger!

Categories

DataTables

How to implement DataTables with knockout observables.

How to implement DataTables with knockout observables.

Answers

Manage catalogs

Howdy, Stranger!

Quick Links

Categories

DataTables