Join the Stack Overflow Community
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

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?

share|improve this question
    
I know datatables but i don't know angular. You're trying to initialize a Datatable object with options on the same table element more than once. This is not allowed. I would look at the initialization code and figure out how it's being called more than once, and change that. – Eric Guan Mar 23 at 23:11
    
Good thoughts, its certainly was race condition as the two watch functions both make calls when the page is initially rendered. You could also click the hour change button fast enough to overload the datatable rendering and cause it to happen that way as well. I ended up using a bit of a hack to work around it. Involved using three variables to identify if datatables was processing, if datatables was initialized, and to run the report initially when the page is loaded. Thanks! – phattyD Mar 24 at 4:46

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.