Datatables init ajax请求初始值答案

【问题标题】：Datatables init ajax request initial valueDatatables init ajax请求初始值
【发布时间】：2015-10-16 21:05:09
【问题描述】：

我有一个带有数据表和淘汰赛 js 的应用程序。

KnockoutJS 应用程序用于管理关键字（标签）以用于附加过滤表。

var table = $("#news").DataTable({
    "ajax": {
        url: "{{ base_url('news/load_news/full') }}",
        data: function (d) {
            d.keywords = ko.toJSON(keywords.keywords);
        }
    },
    "processing": true,
    "serverSide": true,
    "bFilter": false,
    "bLengthChange": false
});

当页面加载时，通过 Ajax 请求填充 KnockoutJS 模型。

我遇到的主要问题是在第一个 Datatables Ajax 请求中，我有空的关键字数组。如果我点击更新表格按钮，d.keywords 不为空。

我认为这个问题是因为 Ajax 请求是异步的，所以我如何强制数据表等到填充的 KnockoutJS 应用程序填充完毕？

===================

   function refresh_table() {
        table.ajax.reload(null, false); // reload DataTable
        fresh_news_alert.hide();
    }

【问题讨论】：

如果您共享更多代码，包括您的更新按钮，则很容易跟踪而不是粗略猜测。
这几乎是所有代码。我只是强制数据表在初始化数据表中等待一些数据。

标签： javascript ajax knockout.js datatables

【解决方案1】：

您应该将 DataTable 初始化放在自定义绑定中。这将确保在您的 Knockout 视图模型被初始化和绑定之前不会调用它。

【讨论】：

【解决方案2】：

此解决方案使用我创建的自定义绑定，该绑定依赖于淘汰赛叉。如果您喜欢此解决方案，请在拉取请求上发表评论，以使其合并 intp 淘汰赛 3.4，谢谢。

example on jsfiddle

knockout 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 };
        }
    };

【讨论】：