angularjs数据表无法重新初始化表错误

Question

I am using angularjs Datatables and keep running into an error.

DataTables Warning: table id=DataTables_Table_0 - Cannot reinitialise Datatable.

I have two watches to run the report as the user changes input.

$scope.dtInstance = {};
$scope.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers')
                                                    .withOption('responsive', true)
                                                    .withOption("autoWidth", false)
                                                    .withDOM('lfrtBip')
                                                    .withButtons(['copy', 'print', 'pdf', 'csv', 'excel']);


$scope.dtColumns = [
    DTColumnBuilder.newColumn('display_name').withTitle('Name'),
    DTColumnBuilder.newColumn('state_desc').withTitle('State'),
    DTColumnBuilder.newColumn('state_Type').withTitle('State Type'),
    DTColumnBuilder.newColumn('adjustedClientStartState').withTitle('State Start Date'),
    DTColumnBuilder.newColumn('adjustedClientEndState').withTitle('State End Date'),
    DTColumnBuilder.newColumn('timeInStateSeconds').withTitle('Seconds'),
    DTColumnBuilder.newColumn('timeInStateMinutes').withTitle('Minutes'),
    DTColumnBuilder.newColumn('timeInStateHour').withTitle('Hours'),
];

$scope.$watch('hours', function (newVal, oldVal)
{
    if (!newVal) return;

    runReport($scope.selectedClient.id, newVal);

});

$scope.$watch('selectedClient', function (newVal, oldVal)
{
    if (!newVal) return;

    runReport(newVal.id, $scope.hours);

});

var runReport = function (clientId, hours)
{
    if (clientId != 'undefined' && clientId != undefined)
    {
        ubernurseService.ClientStateHistory(clientId, hours).then(function (results)
        {


            $scope.states = results.data;

            if (results.data.length > 0)
            {
                $scope.notVisible = false;
            }
            else
            {
                $scope.notVisible = true;
            }
        }, function (error)
        {
            //alert(error.data.message);
        });
    }

}

And in my template

<div class="row">
            <div class="col-md-10 col-md-offset-1">
                <table datatable="ng" dt-options="dtOptions" dt-columns="dtColumns" dt-instance="dtInstance" class="table table-hover table-striped">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>State</th>
                            <th>State Type</th>
                            <th>State Start Date</th>
                            <th>State End Date</th>
                            <th>Seconds</th>
                            <th>Minutes</th>
                            <th>Hours</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="state in states">
                            <td>{{state.display_name}}</td>
                            <td>{{state.state_desc}}</td>
                            <td>{{state.state_Type}}</td>
                            <td>{{state.adjustedClientStartState | date:'medium'}}</td>
                            <td>{{state.adjustedClientEndState | date:'medium'}}</td>
                            <td>{{state.timeInStateSeconds}}</td>
                            <td>{{state.timeInStateMinutes}}</td>
                            <td>{{state.timeInStateHour}}</td>
                        </tr>

                    </tbody>
                </table>
            </div>
        </div>

Can someone please shed some light onto what I am doing wrong here?

Answer 1

The error was because you were trying to reinitialize an existing database. What you need to include is .withOption("destroy", true) to:

$scope.dtOptions = DTOptionsBuilder.newOptions()

That will resolve the issue.