angularjs datatable'mData'未定义

Question

我正在使用l-lin angularjs 0.6和ajax服务器端处理来实现数据表。我提到了其他一些存在类似问题的线程，但仍未找到解决方案。该脚本将按预期方式将我的数据呈现到表中，但是此错误导致缺少其他功能，例如搜索过滤器，行过滤器，甚至分页全数字。

HTML

    <table datatable="" dt-options="dtOptions" dt-column-defs="dtColumnDefs" class="report-table table-striped table table-bordered table-condensed table-hover data-table" ng-if="trans">
        <thead>
            <tr>
                <th>
                    <a ng-click="sort('payment_date')" href="">@lang('app.date')</a>
                    <i class="no-animate fa" ng-show="params.field=='payment_date'" ng-class="'fa-chevron-'+(params.reverse?'down':'up')"></i>
                </th>
                <th>
                    <a ng-click="sort('ref_num')" href="">@lang('delivery.ref_num')</a>
                    <i class="no-animate fa" ng-show="params.field=='ref_num'" ng-class="'fa-chevron-'+(params.reverse?'down':'up')"></i>
                </th>
                <th>@lang('app.description')</th>
                <th class="text-right">
                    <a ng-click="sort('debit')" href="">@lang('bank_recon.deposit')</a>
                    <i class="no-animate fa" ng-show="params.field=='debit'" ng-class="'fa-chevron-'+(params.reverse?'down':'up')"></i>
                </th>
                <th class="text-right">
                    <a ng-click="sort('credit')" href="">@lang('bank_recon.withdrawal')</a>
                    <i class="no-animate fa" ng-show="params.field=='credit'" ng-class="'fa-chevron-'+(params.reverse?'down':'up')"></i>
                </th>
                <th>
                    <label for="chk_all" style="display:block">
                        <input id="chk_all" type="checkbox" ng-change="checkBoxSelection()" ng-model="params.checkbox[0]">
                        @lang('bank_recon.select_all')
                    </label>
            </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td>@lang('trans.opening_balance')</td>
                <td class="text-right">@{{trans.balance_brought_fwd | currency:''}}</td>
                <td></td>
                <td></td>
            </tr>
            <tr ng-repeat="trx in trans.trans | filter:viewOptionFilter | orderBy:sortRows:params.reverse" ng-init="trx[trx.entry] = trx.amount">
                <td>
                    <a href="@{{trx.invoice_url}}" target="_blank">
                        @{{trx.payment_date | date:_dateFormat.shortDate}}
                    </a>
                </td>
                <td>
                    <a href="@{{trx.receipt_url}}" target="_blank" ng-if="trx.ref_num">@{{trx.ref_num}}</a>
                </td>
                <td>@{{trx.description}}</td>
                <td class="text-right">
                    <span ng-if="trx.entry === 'debit'">@{{trx.amount | currency:''}}</span>
                </td>
                <td class="text-right">
                    <span ng-if="trx.entry === 'credit'">@{{trx.amount | currency:''}}</span>
                </td>
                <td>
                    <label for="chk_@{{trx.id}}" style="display:block">
                        <input type="checkbox" id="chk_@{{trx.id}}" name="marked_reconciled" ng-model="trx.marked_reconciled" ng-change="calBalance()" ng-disabled="trx.reconcile_on && (trx.reconcile_on | toDate | date:_dateFormat.shortDate) != (item.reconcile_date | toDate | date:_dateFormat.shortDate)">
                        <span ng-show="trx.reconcile_on">@{{trx.reconcile_on | toDate | date:'MMM yy'}}</span>
                    </label>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th colspan="3"></th>
                <th class="text-right">@{{trans.trans | filter:viewOptionFilter | sumOfColumn:'debit' | currency:''}}</th>
                <th class="text-right">@{{trans.trans | filter:viewOptionFilter | sumOfColumn:'credit' | currency:''}}</th>
                <th></th>
            </tr>
        </tfoot>
    </table>