重新初始化 JQuery DataTable 时超链接被禁用答案

【问题标题】：Hyperlink gets disabled when reinitializing JQuery DataTable重新初始化 JQuery DataTable 时超链接被禁用
【发布时间】：2017-07-21 12:26:54
【问题描述】：

以下代码示例演示了我如何使用 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”设置列设置。我试图用打字稿初始化视图模型中的数据表，但我遇到了同样的问题。

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

【问题讨论】：

我对数据一无所知，很抱歉，但是在 Knockout 中，您需要更新具有可观察对象的 ViewModel，并且 Knockout 将显示其更新后的值。这是一个示例：datatables.net/dev/knockout，希望对您有所帮助。
您好，视图模型得到更新，表格得到正确的数据。只是在重新初始化表格时，应该放置超链接的列不起作用。

标签： javascript jquery knockout.js datatable

【解决方案1】：

我认为您想使用 Datatables 渲染来创建您的链接。所以这里有一个自定义数据绑定器，用于数据表，它使用渲染来创建链接。

这是查看它在行动中的小提琴。 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);
  }
}

【讨论】：