Knockout.js DataTable bindings
Knockout.js DataTable bindings
I’ve recently started using knockout.js, which is an implementation of Model-View-ViewModel (MVVM) for Javascript. Well, it covers the View-ViewModel part because the actual data model is on the server.
Along with Knockout, I’ve been using jQuery UI – which I’ve been using for years anyway.
Today, I needed a table widget. There isn’t currently one available in jQuery UI, though one is being developed, so I searched for an alternative. I came across DataTables (well, I’d actually used it before) – but there wasn’t a Knockout binding available. So I developed one, and I’m making it available under the MIT licence.
Demos
Everyone loves demos, so here are a few.
- Basic usage (no options): http://jsfiddle.net/vB3Aj/
- With options (and jQuery UI theming): http://jsfiddle.net/tdppH/1/
Usage
I’ve set up the demos on jsfiddle to use as little code as possible, so you’ll probably be able to work it out from those.
Any questions though, post in the comments.
Download
Download Knockout.js DataTables binding
About the Author
Comments:
Leave a Reply to: Cancel Reply
July 31, 2011 at 5:01 am
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!
July 31, 2011 at 10:42 am
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!
November 22, 2011 at 1:00 pm
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).
August 3, 2011 at 8:56 pm
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.
September 19, 2011 at 2:54 pm
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"] ?
November 21, 2011 at 1:02 am
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!
June 9, 2012 at 12:50 am
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.
November 17, 2011 at 11:46 am
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?
November 21, 2011 at 12:54 am
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!
December 9, 2011 at 1:59 am
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!