微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

无法在AngularJs中重新初始化DataTable

如何解决无法在AngularJs中重新初始化DataTable

我收到以下错误“ DataTables警告:表id = table_Logs-无法重新初始化DataTable。有关此错误的更多信息,请参见http://datatables.net/tn/3"

我正在使用AngularJs初始化数据表并通过API获取数据。而是错误“无法重新初始化数据表”

表的代码

logTable = $('#table_Logs').DataTable({                    
                    serverSide: true,processing: true,searchDelay: 500,responsive: true,ajax: {
                        url: '/API/Exceptions',method: 'POST',datatype: 'json',data: function (serverParams) {                            
                            for (var i = 0; i < serverParams.order.length; i++) {
                                serverParams.order[i].column = serverParams.columns[serverParams.order[i].column].data;
                            }                            
                            delete serverParams['columns'];
 
                            return serverParams;
                        }
                    },columns: [
                        {
                            data: 'timeStamp',render: function (timeStamp) {
                                return $filter('date')(timeStamp,'medium');
                            }
                        },{
                            data: 'exception',render: function (exception) {
                                return exception ? exception.slice(0,50) : '';
                            }
                        },{
                            data: 'message',render: function (message) {
                                return message ? message.slice(0,20) : '';
                            }
                        },{
                            orderable: false,render: function () {
                                return `<i class="showLog fa fa-fw fa-2x fa-toggle-down"></i>`;
                            }
                        },],columnDefs: [
                        { responsivePriority: 1,targets: 0 },{ responsivePriority: 1,targets: 1 },targets: 3 },responsive: {
                        details: 'false',},});
 
                logTable.on('click','.showLog',function () {
                    var tr = $(this).closest('tr');
                    var row = logTable.row(tr);
 
                    if (row.child.isShown()) {
                        // This row is already open - close it
                        row.child.hide();
                        tr.removeClass('shown');
                    }
                    else {
                        // Open this row                        
                        var rowinfo = row.data();
                        if (rowinfo == undefined) {
                            rowinfo = logTable.row(tr.prev()).data();
                        }
                        row.child(format(rowinfo)).show();
                        tr.addClass('shown');
                    }
                });
 
                function format(logRow) {
                    return '<dl>' +
                        '<dt><h4 class="text-bold">Exception:</h3></td>' +
                        '<dd><pre class="error-log-pre">' + $sce.trustAsHtml(logRow.exception) + '</pre></td>' +
                        '<dt><h4 class="text-bold">Message:</h3></td>' +
                        '<dd><pre class="error-log-pre">' + $sce.trustAsHtml(logRow.message) + '</pre></td>' +
                        '<dt><h4 class="text-bold">Additioanl Properties:</h3></td>' +
                        '<dd><pre class="error-log-pre">' + logRow.properties + '</pre></td>';
                }
            });

HTML代码

<div class="card" ng-controller="logController" ng-init="init()">
    <div class="card-header header-elements-inline">
        <h5 class="card-title">Exception logs</h5>
        <div class="header-elements">
 
        </div>
    </div>
 
    <div class="card-body">
        The list of <code>Exception logs</code>.
    </div>
 
    <table class="table datatable-ajax" id="table_Logs">
        <thead>
            <tr>
                <th>Time Stamp</th>
                <th>Exception</th>
                <th>Message</th>
                <th class="text-center">Actions</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。