Question

以下代码示例演示了如何使用HTML，knockout和typescript

初始化jQuery Datatable

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

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

由于我一次添加一行，使用多列我不知道如何为＆＃34; applications.ssn＆＃34;设置列设置。直。我试图用typescript初始化viewmodel中的数据表，但我遇到了同样的问题。

如何重新初始化并为特定列添加超链接设置？

Answer 1

我认为您希望使用Datatables渲染来创建链接。所以这里是数据表的自定义数据绑定器，它使用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);
  }
}

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

1 个答案: