使用 Knockout BindingHandler 公开 JQuery.Datatables Select？

Question

我已经设置了一个custom KO bindingHandler 来帮助更新数据表。

documentation为JQuery.DataTable.Select关于如何获取数据需要一个句柄。

var table = $('#myTable').DataTable();

table.rows( { selected: true } ).data();

但是，我的 ko.bindingHandler 将 DataTable 的设置移动到我的 cshtml 文件中，所以我没有 $('#myTable').DataTable() 的句柄。

如何使我的 viewModel 可以使用 DataTable 函数？ 我曾以为我可以使用 JQuery 将 $('#myTable') 转换为数据表，但没有这样的运气。

.cshtml：

<table id="myTable">
   <thead>
     <tr>
       <th>Title</th>
   </thead>
   <tbody data-bind="dataTablesForEach: {data: trainingSearchResults, dataTableOptions: {
                select: {items: 'row', style: 'os'},
                searching: false,
                info: false,
                paging: false
              }">
       <tr>
         <td data-bind="text: title"></td>
       </tr>
  </tbody>
</table>

自定义绑定：

import * as ko from "knockout"
import * as $ from "jquery";

export class KnockoutExtensions {
    // Constructor
    constructor() {
        ko.bindingHandlers.dataTablesForEach = {
            page: 0,
            init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
                var options = ko.unwrap(valueAccessor());
                ko.unwrap(options.data);
                if (options.dataTableOptions.paging) {
                    valueAccessor().data.subscribe(function (changes) {
                        var table = $(element).closest('table').DataTable();
                        ko.bindingHandlers.dataTablesForEach.page = table.page();
                        table.destroy();
                    }, null, 'arrayChange');
                }
                var nodes = Array.prototype.slice.call(element.childNodes, 0);
                ko.utils.arrayForEach(nodes, function (node: Node) {
                    if (node && node.nodeType !== 1) {
                        node.parentNode.removeChild(node);
                    }
                });
                return ko.bindingHandlers.foreach.init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
            },
            update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
                var options = ko.unwrap(valueAccessor()),
                    key = 'DataTablesForEach_Initialized';
                ko.unwrap(options.data);
                var table;
                if (!options.dataTableOptions.paging) {
                    table = $(element).closest('table').DataTable();
                    table.destroy();
                }
                ko.bindingHandlers.foreach.update(element, valueAccessor, allBindings, viewModel, bindingContext);
                table = $(element).closest('table').DataTable(options.dataTableOptions);
                if (options.dataTableOptions.paging) {
                    if (table.page.info().pages - ko.bindingHandlers.dataTablesForEach.page == 0)
                        table.page(--ko.bindingHandlers.dataTablesForEach.page).draw(false);
                    else
                        table.page(ko.bindingHandlers.dataTablesForEach.page).draw(false);
                }
                if (!ko.utils.domData.get(element, key) && (options.data || options.length))
                    ko.utils.domData.set(element, key, true);
                return { controlsDescendantBindings: true };
            }
        }; 
    }
}

Answer 1

尝试从我的 viewModel 再次调用初始化时：

var table = $("#trainingSearchResultsTable").DataTable({
    select: { items: 'row', style: 'os' },
    searching: false,
    info: false,
    paging: false
});

给我一​​个错误Warning: Cannot reinitialise

它把我带到answer：

通过将选项传递给 DataTables 会触发此错误 选定节点的 DataTable 实例时的构造函数对象 已经初始化了。

对象实例检索

在尝试获取对 用于使用 API 的 DataTable。例如，您可能有一个 将始终尝试通过以下方式创建 DataTable 实例的函数 创建时传入选项。然后你进行修改 在已经初始化的表上调用此函数 你得到这个错误。

在这种情况下，您需要使用 $.fn.dataTable.isDataTable() 静态方法。这可用于检查表是否为 DataTable 或 还没有：

if ( $.fn.dataTable.isDataTable( '#example' ) ) {
    table = $('#example').DataTable();
}
else {
    table = $('#example').DataTable( {
        paging: false
    } );
}