Knockout ViewModel更改时更新jquery DataTable

Question

I have a Datatable that takes data from Knockout ViewModel array. New rows are added fine when I push new objects to the array, but when an object in that array is changed, the row isn't being updated.

The relecent ViewModel code:

  .....
  self.Products = ko.observableArray();
  .....

Sample data (eg result of ko.toJSON(VM.Products()) ):

  "[
  {"Price":"114.28","Name":"Pearls","Description":"Little and big","Quantity":3},
  {"Price":"117.55","Name":"Silver","Description":"Sliver Coins","Quantity":2},
  {"Price":"166.09","Name":"Phone","Description":"Nokia","Quantity":2},
  {"Price":"169.36","Name":"Wood","Description":"Northen forest wood","Quantity":1}
  ]"

Then Datatable code:

  var CartDt = $("#PurchasedPrdTbl").DataTable({        
    pageLength: 5,      
    aoData: ko.toJSON(VM.Products()),
    columns: [
        { "title": 'Price' },
        { "title": 'Name' },
        { "title": 'Description' },
        { "title": 'Quantity' },
        {
            "className": 'remove-details-control',
            "orderable": false,
            "data": null,
            "defaultContent": '',
            "title": "Sell Me!",
            "fnRender": function (oObj) {

                return oObj.aData;
            }
        }
    ]
});

I'v tried ajax.reload but it didn't helped.

Any ideas would be great, thanks.

EDIT:

I'm trying fnUpdate ( source ) like this:

 CartDt.fnUpdate([{"Price":"114.28","Name":"Pearls","Description":"Little and big","Quantity":3}],1);

But I get this: Uncaught TypeError: undefined is not a function

Answer 1

This is because the html that is bound to your knockout observable array is mangled when datatables is initialized... The html is copied and reformatted to be "datatables" after initialization. so the elements that you view after datatables initialization are not the same elements that knockout has bound to. I have created a custom binding to use datatables with knockout. it is dependent upon a fork of knockout which adds before render all and after render all events. I have created a pull request with the knockout git hub repository. If the below solution helps you please leave a comment on the pull request to get it merged into knockout 3.4... thanks.

fiddle of working solution

my pull request

ko.bindingHandlers.DataTablesForEach = {

        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
             var nodes = Array.prototype.slice.call(element.childNodes, 0);
            ko.utils.arrayForEach(nodes, function (node) {
                if (node && node.nodeType !== 1) {
                    node.parentNode.removeChild(node);
                }
            });
            return ko.bindingHandlers.foreach.init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
        },
        update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

            var value = ko.unwrap(valueAccessor()),
            key = "DataTablesForEach_Initialized";

            var newValue = function () {
                return {
                    data: value.data || value,
                    beforeRenderAll: function (el, index, data) {

                        if (ko.utils.domData.get(element, key)) {
                            $(element).closest('table').DataTable().clear();
                            $(element).closest('table').DataTable().destroy();
                        }
                    },
                    afterRenderAll: function (el, index, data) {
                        $(element).closest('table').DataTable(value.options);
                    }

                };
            };

            ko.bindingHandlers.foreach.update(element, newValue, allBindingsAccessor, viewModel, bindingContext);

            //if we have not previously marked this as initialized and there is currently items in the array, then cache on the element that it has been initialized
            if (!ko.utils.domData.get(element, key) && (value.data || value.length)) {
                ko.utils.domData.set(element, key, true);
            }

            return { controlsDescendantBindings: true };
        }
    };