I've developed a custom KO bindingHandler (view it here) to assist in updating the DataTable.
The documentation for JQuery.DataTable.Select regarding how to access data requires a handle. You can see the details here.
var table = $('#myTable').DataTable(); table.rows( { selected: true } ).data();
However, my ko.bindingHandler moves the DataTable setup to my cshtml file, which means I lack a handle for $('#myTable').DataTable().
How can I expose the DataTable functions to my viewModel? I considered using JQuery to cast $('#myTable') as a dataTable but have been unsuccessful so far.
.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>
Custom Binding:
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 };
}
};
}
}