Knockout+DataTables筛选;不起作用

Knockout+DataTables Filtering doesn't work

本文关键字：不起作用 筛选 Knockout+DataTables      更新时间：2023-09-26

我有一个包含数据的表，希望能够过滤其中的行，数据来自服务并通过敲除绑定：

<table class="table bordered hovered">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: usersList">
        <tr>
            <td data-bind="text: Id"></td>
            <td data-bind="text: UserName"></td>
        </tr>
    </tbody>
</table>
function getUsers() {
    $.getJSON('/api/aspnetusers', null, function (users) {
        ViewModel.usersList.pushAll(users);
    });
}
getUsers();
$(function () {
    $('.table').DataTable();
});

在过滤器输入后，我总是得到：

 No data available in table

这可能是时间问题，请尝试等待数据加载后再初始化DataTables:

$.getJSON('/api/aspnetusers', null, function (users) {
   ViewModel.usersList.pushAll(users);
}).done(function(){ $('.table').DataTable(); });

这就是实现它的方法……我制作了一个jsfiddle，展示了这一点：

为了实现这一点，我不得不在原来的敲除foreach绑定定义中添加两个回调方法。我目前正试图将这些赛事纳入最新版本的淘汰赛。我需要添加beforeRenderAll和afterRenderAll回调来销毁数据表，并在每一个绑定的knockout添加html后重新初始化数据表。这就像一个魅力。显示这一点的JSFiddle有一个完全可编辑的jquery数据表，通过敲除绑定到ViewModel。

ko.bindingHandlers.DataTablesForEach = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    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().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 };
}

}；

jsfiddle与引导

jsfiddle with jqueryUI

相关文章：