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

Question

下面的代码示例演示了如何使用HTML、knockout和typescript初始化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"
        }
    });
}

我在重新初始化表时遇到了一些问题，但我设法解决了这个问题，首先清除了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();
                }

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

由于我一次添加一行，对于多个列，我不知道如何直接设置"applications.ssn“的列设置。我试图用typescript在视图模型中初始化datatable，但我得到了同样的问题。

你知道如何重新初始化和放置特定列的超链接设置吗？

Answer 1

我认为你想使用Datatables render来创建你的链接。因此，这里有一个用于数据表的自定义数据绑定器，它使用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);
  }
}