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

下面的代码示例演示如何使用HTML、knockout和typescript初始化jQuery数据表

HTML:

我在重新初始化该表时遇到了一些问题，但我成功地通过首先清除datatable，然后向datatable添加行并重新绘制来处理它

 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();
                }

if（this.tableinitilized）{
$（“#课程表情信息表”）.DataTable（）.clear（）.draw（）；
对于（var i=0；i

这确实会重新初始化datatable，但不会像初始化表时那样将超链接放置到第一列。所有其他表设置都是正确的，例如语言和页面长度

由于我一次添加一行，有多个列，我不知道如何直接为“applications.ssn”设置列设置。我尝试用typescript初始化viewmodel中的datatable，但我遇到了同样的问题

---

您知道如何重新初始化并为特定列设置超链接吗？

我想您想使用Datatables render创建链接。因此，这里有一个自定义数据绑定器，用于使用render创建链接的data table

这里是小提琴，看看它的行动

ko.bindingHandlers.dataTable={
init:function（元素、valueAccessor、allBindingsAccessor）{
var value=valueAccessor（），
行=ko.toJS（值）；
allBindings=ko.utils.unwrapObservable（allBindingsAccessor（）），
$element=$（element）；
变量表=$element.DataTable（{
数据：行，
栏目：[
{数据：“id”}，
{数据：“名字”}，
{data:“lastName”}，
{数据：“电话”}，
{
数据：“ssn”，
“呈现”：函数（数据、类型、完整、元）{
返回“”+数据+“”；
}
}
]
} );
ko.utils.domNodeDisposal.addDisposeCallback（元素，函数（）{
$element.dataTable（）.fndostroy（）；
});
value.subscribe（函数（newValue）{
rows=ko.toJS（newValue）
console.log（行）；
$element.find（“tbody tr”）.remove（）；
table.rows（）.remove（）.draw（）；
setTimeout（函数（）{$.each（行，函数（索引，行）{
table.row.add（row.draw）（）
});
}, 0);
}，空）；
}
}

很抱歉，我对datable一无所知，但在Knockout中，您需要更新一个具有可观察对象的ViewModel，Knockout将显示其更新的值。下面是一个示例：，希望这有帮助。您好，ViewModel得到更新，表得到正确的数据。只是当重新初始化表。

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();
                }

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