Comments on: Knockout.js DataTable bindings

By: Leigh Harrison

Leigh Harrison — Fri, 08 Jun 2012 23:50:19 +0000

This is a wonderful binding; it’s lightweight but effective. However, I cannot get it work with two dimensional data arrays such as this.

function users(one, two three){
this.one = ko.observable(one);
this.two = ko.observable(two);
this.three = ko.observable(three);
}

I’m sure I’m simply failing to grasp the paradigm, but I’d give a lot for a simple example of column population by key instead of index.

By: Lucas Martin

Lucas Martin — Fri, 09 Dec 2011 00:59:58 +0000

Heya Josh,

Your blog post inspired me to create a pretty fully featured databinding in knockout js that integrates with datatables. If you’re interested you can check it out at: https://github.com/CogShift/Knockout.Extensions

With a demo’s at: http://jsfiddle.net/ducka/fPaQs/ and http://jsfiddle.net/ducka/haq2y/

Cheers!

By: Allan

Allan — Tue, 22 Nov 2011 12:00:13 +0000

Its not so much of a complete regen as a rearrangement. The elements in the TBODY that can be reused are (i.e. the TR elements are held in a Javascript variable and appended to the table’s body as required). As such, any static events or properties assigned to the nodes are retained, since it isn’t actually creating a new node (unless of course you are adding a new row).

By: Josh

Josh — Mon, 21 Nov 2011 00:02:19 +0000

Hi Niklas,

Sorry about the delay in replying!

You should be able to supply any data that is accepted by DataTables’ fnAddData() method (see http://datatables.net/api). It states that you can supply either Arrays or Objects – I’ve just had a quick try with objects but the table wouldn’t render, not sure why though.

Maybe you’ll be able to find something useful on the API page above. If you do, let me know!

By: Josh

Josh — Sun, 20 Nov 2011 23:54:16 +0000

Hi Orson,

The paging doesn’t appear on my demo as I’ve only styled the table – not the entire datatable. If I had referenced the full datatables CSS, the Prev/Next buttons would be visible.

To check this, you can use Firebug to inspect the generated table. There will be 2 DIVs in the same level as the table – one with a class “dataTables_info” which is the “Showing 1 to 10 of…” description, and another with a class “dataTables_paginate paging_two_button”. Inside this DIV are two more, which are the Prev/Next buttons.

Hope that helps!

By: Orson

Orson — Thu, 17 Nov 2011 10:46:25 +0000

Paging doesn’t work without the “bJQueryUI” option activated. Is there a way i could have my paging working without the options set to true?

By: Niklas Pettersson

Niklas Pettersson — Mon, 19 Sep 2011 13:54:09 +0000

Nice job! I have a question about how we can data-bind to a object data model that looks like [{"id":1, "name" : "Josh"}, {...}] instead of the example data model ["data1", "data2"] ?

By: Kevin Turner

Kevin Turner — Wed, 03 Aug 2011 19:56:34 +0000

I’m very happy to see someone digging in to this. When I was looking at data-binding frameworks, this was a big concern of mine; data binding looked great for many cases, but what about those where I’m throwing a lot of things around with datatables?
I still haven’t used Knockout in Real Life yet, but we’re strongly considering it for some projects on the table right now, and seeing how this works will help.

By: Josh

Josh — Sun, 31 Jul 2011 09:42:17 +0000

Yes, you’re correct, but unfortunately the table regen seems to be a limitation of DataTables itself – their own “Add Row” example shows the entire tbody being regenerated. If you inspect it in Firebug, then add a row, Firebug gives it a yellow highlight to indicate a dom change. (http://www.datatables.net/release-datatables/examples/api/add_row.html).

Glad you’ve found it useful though!

By: Kevin Dangoor

Kevin Dangoor — Sun, 31 Jul 2011 04:01:47 +0000

Very nice to see this! I’m a big fan of both declarative binding and DataTables, and I was just looking at Knockout. The only drawback I see to this plugin is that it appears that the entire table is regenerated for every change, rather than just adding/removing rows. Am I reading that correctly?

As someone just looking at Knockout, this was my first introduction to custom bindings, so this was a helpful example. Thanks!