数据表不适用于使用 MVC 动态创建的表答案

【问题标题】：Datatable not apply on dynamically created table using MVC数据表不适用于使用 MVC 动态创建的表
【发布时间】：2019-04-08 21:48:40
【问题描述】：

我在 mvc 应用程序中遇到数据表问题 mvc 有一个常见的布局，即母版页（布局页面）

我已经在适用于所有子页面的母版页（布局页面）中普遍实现数据表

现在，我遇到了一个挑战，即在选择组合框时会动态创建一些表格

布局页面

$('.table').DataTable({
        "aoColumnDefs": [
                          {
                              bSortable: false,
                              aTargets: [-1], /* 1st one, start by the right */
                              "defaultContent": "",
                          }
        ],
        "fixedHeader": true,
        "lengthChange": false,
        "bPaginate": false,
        "responsive": true,
        "autoWidth": false,
        "scrollY": "300px",
        "scrollCollapse": true,
        "paging": false,
        initComplete: function (settings, json) {
            this.api().columns().header().each(function (th) {
                $(th).removeClass("sorting_asc");
                $(th).removeClass("sorting");
            }
         )
        },
    });

儿童（部分视图）

<div class="row">
                <div class="col-md-12">
                    <br />
                    <div id="example"></div>                        
                </div>
            </div>

function GetEmails() {
        var tbl = $('#example');
        $.ajax({
            url: '/test/GetTestData',
            contentType: 'application/html ; charset:utf-8',
            type: 'GET',
            dataType: 'html'
        }).success(function (result) {
            tbl.empty().append(result);                
        }).error(function (result) {
            alert("Fail");
        });
    }

现在，我有问题

 tbl.empty().append(result);

在 div 中追加表后，数据表不适用于该表，我想知道如何在 Layout 页面 中通知该表已追加到 child 页面中

让我知道，javascript 或 jquery 中是否有任何事件在 append 之后触发？？

提前致谢

【问题讨论】：

你需要在你成功的时候初始化它，在你追加结果之后：tbl.find('.table').DataTable(... options)
该成功事件不会在布局页面中触发，它仅在部分视图（子视图）中有效

标签： javascript jquery asp.net-mvc datatable datatables

【解决方案1】：

试试这个，它的工作原理

function ApplyDataTable()
{      
$('#example').bind('DOMNodeInserted', function (event) {
    if (event.type == 'DOMNodeInserted') 
    {
    //Datatable for search and sorting
    $(currntTable).DataTable({
    "aoColumnDefs": [
                      {
                          bSortable: false,
                          aTargets: [-1], /* 1st one, start by the right */
                          "defaultContent": "",
                      }
    ],
    "fixedHeader": true,
    "lengthChange": false,
    "bPaginate": false,
    "responsive": true,
    "autoWidth": false,
    "scrollY": "300px",
    "scrollCollapse": true,
    "paging": false,
    });      
    } 
});
}

【讨论】：

【解决方案2】：

您可以像这样在 ajax 成功初始化数据表，

  $('.Table').DataTable();

但如果你真的只想从布局中添加数据表，那么这应该会有所帮助

 $(document).ajaxComplete(function (event, xhr, settings) {
        $('.Table').DataTable();
    });

【讨论】：

它在布局页面中不起作用，它只适用于部分（子）页面