Knockout.js DataTable bindings

Knockout.js DataTable bindings

Jul 30, 2011
By
10 Comments

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.

  1. Basic usage (no options): http://jsfiddle.net/vB3Aj/
  2. 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

Josh

Comments:

  1. 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!

    • 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!

      • 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).

  2. 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.

  3. 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"] ?

    • 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!

      • 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.

  4. 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?

    • 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!

  5. 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!

Leave a Reply to: Cancel Reply