超链接在重新初始化 JQuery 数据表时被禁用

Question

下面的代码示例演示了如何使用 HTML、挖空和打字稿初始化 jQuery 数据表

.HTML：

<table id="coursemoment-info-table"  class="table table-hover">
<thead>
<tr >
// headers
</tr>
</thead>
<tbody>
<!-- ko foreach: selectedCourseMoment().courseApplications -->
<tr>
<td>
<a data-bind="{text: ssn, attr:{ href: '/Medlem/'  + ssn} }"></a>
</td>
<td data-bind="text:name + ' ' + surname"></td>
.
.   
.
</tr>
<!-- /ko-->
</tbody>
</table>

打字稿：

private initCourseMomentInformationDataTable(): void {
$("#coursemoment-info-table").DataTable({
pageLength: 5,
order: [1, 'desc'],
language: {
url: "/Assets/js/jquery-datatable-swedish.json"
}
});
}

我在重新初始化表时遇到了一些问题，但我设法通过首先清除数据表，然后将行添加到数据表并重新绘制来处理它。

if (this.tableInitiliazed) {
$("#coursemoment-info-table").DataTable().clear().draw();
for (var i = 0; i < data.courseApplications.length; i++) {
var application = data.courseApplications[i];
$("#coursemoment-info-table").DataTable().row.add(
[
application.ssn,
// blah blah yada yada
]).draw();
}

这确实会重新启动数据表，但它不会像初始化表时那样将超链接放在第一列。所有其他表格设置都正确，例如语言和页面长度。

由于我一次添加一行，因此对于多列，我不知道如何直接为"applications.ssn"设置列设置。我尝试使用打字稿初始化视图模型中的数据表，但遇到了同样的问题。

任何想法如何重新初始化并为特定列放置超链接设置？

Answer 1

我认为您想使用数据表渲染来创建链接。 因此，这里是数据表的自定义数据绑定器，它使用 render 来创建链接。

这是看到它的实际效果的小提琴。 http://jsfiddle.net/LkqTU/35823/

ko.bindingHandlers.dataTable = {
init: function(element, valueAccessor, allBindingsAccessor) {
var value = valueAccessor(),
rows =  ko.toJS(value);
allBindings = ko.utils.unwrapObservable(allBindingsAccessor()),
$element = $(element);
var table =  $element.DataTable( {
data: rows,
columns: [
{ data: "id" },
{ data: "firstName" },
{ data: "lastName" },
{ data: "phone" },
{
data: "ssn",
"render": function ( data, type, full, meta ) {
return '<a href="/Medlem/'+data+'">' + data + '<a>';
}
}
]
} );

ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$element.dataTable().fnDestroy();
});
value.subscribe(function(newValue) {
rows = ko.toJS(newValue)
console.log(rows);
$element.find("tbody tr").remove();
table.rows().remove().draw();
setTimeout(function(){    $.each(rows, function( index, row ) {
table.row.add(row).draw()
});
}, 0);

}, null);
}
}