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

高塞勒姆

以下代码示例演示了我如何使用 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"
        }
    });
}

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

 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”设置列设置。我试图用打字稿初始化视图模型中的数据表,但我遇到了同样的问题。

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

布莱恩·德林格

我认为您想使用 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);
  }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

gettng使用jQuery dataTables时无法重新初始化DataTable

datatable jQuery无法重新初始化DataTable

在Select(DropDown)更改事件上重新初始化Jquery DataTable

jQuery DataTable-动态初始化后在隐藏/显示上启用/禁用列过滤

使用Symfony2和Twig时警告“无法重新初始化DataTable”

DataTable 自动重新初始化自身

DataTables警告(表ID ='example-advanced'):在同时使用treetable和datatable时无法重新初始化DataTable

使列数据作为超链接(dataTable JQUERY)

jQuery验证重新初始化

更改表内容后重新初始化DataTable

无法在 AJAX 响应中重新初始化 DataTable

DataTables 警告:无法重新初始化 DataTable

如何在AJAX响应中重新初始化DataTable

验证时重新初始化服务

如何在 jQuery DataTable 中将列数据设为超链接

如何向json初始化并由Spring映射的jQuery dataTable的ajax请求添加请求参数

ajax调用后jQuery UI datepicker重新初始化

什么时候需要重新初始化jQuery元素

重定向时重新初始化类

原因:无法在恢复时重新初始化视频输出

为什么在更新模型时重新初始化Controller?

无法重新初始化DataTable-数据表的动态数据

Datatable.js 表的初始化

jQuery jscrollpane销毁然后重新创建/重新初始化

从Node初始化jquery

如何使用angular 4在Jquery Datatable中添加编辑超链接

React-Router URL 在链接单击时导致组件重新安装(使用 useEffect(..), [] 重新初始化)

与KnockoutJS结合使用时,为什么jQuery File Upload需要重新初始化?

调用.html()替换内容后,如何重新初始化jQuery调用