dtInstance not initialized correctly

[Orvisky]

I have modified datatables to new version 0.4.3 and i want to use $scope.dtInstance.reloadData(). But my object dtInstance is initialized like this:

• and it should by like your example:

{
    "id": "foobar",
    "DataTable": oTable,
    "dataTable": $oTable,
    "reloadData": function(callback, resetPaging),
    "changeData": function(newData),
    "rerender": function()
}

• strange thing is, when i call $scope.dtInstance.reloadData(), no error is show. It looks like that method works (but dont reload data) even if that method is not in object.
• when i use older $scope.dtOptions.reload = true, it reload data (and dont throw error again)

[l-lin]

The functions are inside __proto__.
dtInstance.reloadData reloads the data only with the promise and ajax renderers.
Can you put your code?

[Orvisky]

• tables is common module that return table options at one place (because i use datatables-reponsive that i initialize in that common module).

$scope.dtInstance = {};

$scope.dtOptions = tables.getOptions('table', {
                language: {url: $scope.currentLang().dataTables},
                search: {'sSearch': $scope.slug},
                tableId: "#someID",
                createdRow: function(row, data, dataIndex) {
                    $compile(angular.element(row).contents())($scope);
                }})
                .withOption('ajax', function (data, callback, settings) {
                    ...
                    $http.get('API_CALL' + $.param(data)).
                        success(function (result) {
                            callback(result);
                        }).
                        error(function (data, status) {
                            callback({"data": []});
                        });
                });

HTML

<table id="TABLE_ID" datatable="" dt-options="dtOptions" dt-columns="dtColumns" dt-instance="dtInstance" class="table table-striped table-hover dataTable no-footer">

• and then when i delete item i am trying reload datatables like: scope.dtInstance.reloadData();

[l-lin]

I made a pen that does what you want.
Can you modify it to reproduce your issue?

[rosshays]

I ran into this problem myself. I tried the pen and it did work.

So I think what is happening based on some of the other angular things I've used is that the datatable directive is actually making its own scope, so if you do the following in your controller...

$scope.nested = {};
$scope.nested.dtInstance = {}

....and then in your HTML...

<table
    datatable=""
    class="table table-striped table-hover table-bordered table-condensed"
    dt-options="dtOptions"
    dt-columns=dtColumns
    dt-instance="nested.dtInstance">
</table>

...it seems to work. If this is intended, it should probably be made more clear in the documentation.

[joelcdoyle]

I can attest that what @rosshays said is true. If your controller is nested inside another controller, you must use a nested scope or dtInstance will not work properly.

[l-lin]

Can you edit this pen to reproduce your issue?

[rachellcarbone]

I experienced this exact problem and realized that when setting up DTOptionsBuilder.fromFnPromise I wasn't providing a function that returns a promise, just the result of the promise. By returning the data it populates the DataTable but it doesn't know where the data came from (the promise) so the reloadData can't make a call for an updated dataset.

[yhelfronda]

Thanks @rosshays!! Your code solved my problem.

[yudizgames]

Thanks @rosshays :)