Can't use reloadData() when use 'ajax' option with DataTable 10.1

[mixedmuffin]

Hello @l-lin ,

I have a scenario that when I click on search button on search criteria panel, the data in datatable will be refreshed.

My code look like this :

controller('AgiMConfigController', function($scope, $location, $compile, AgiMConfigService, $routeParams, DTOptionsBuilder, DTColumnBuilder){
        "use strict";
        $scope.dtOptions = DTOptionsBuilder.newOptions()
            .withOption('ajax', {
                "contentType": "application/json; charset=utf-8",
                dataType: "json",
                "url": "service/agimconfig/",
                "type": "POST",
                "data": function ( d ) {
                    console.log("data");
                    d.search = $scope.searchData || {}; //search criteria
                    return JSON.stringify(d);
                }
            })
            .withOption('processing', true)
            .withOption('serverSide', true)
            .withOption('filter', false)
            .withPaginationType('full_numbers');

        $scope.dtColumns = [
            DTColumnBuilder.newColumn('configKey').withTitle('Config Key'),
            DTColumnBuilder.newColumn('configValue').withTitle('Config Value'),
            DTColumnBuilder.newColumn('configGroup').withTitle('Config Group'),
            DTColumnBuilder.newColumn('description').withTitle('Description'),
            DTColumnBuilder.newColumn('remark').withTitle('remark')
        ];

        $scope.$on('event:dataTableLoaded', function(event, data) { 
            console.log('event:dataTableLoaded:'+data); 
            $scope.tableId = data.id;

            $scope.search = function() {
                $scope.searchData = angular.copy($scope.criteria);
                $scope.dtOptions.reloadData();
            };
        });
    }).
...

The problem is reloadData() doesn't work.

So, I try to implement in other way. It work correctly.
My code look like this :

controller('AgiMConfigController', function($scope, $location, $compile, AgiMConfigService, $routeParams, DTOptionsBuilder, DTColumnBuilder){
        "use strict";

        console.log('test AgiMConfigController');


        $scope.dtOptions = DTOptionsBuilder.newOptions()
            .withOption('ajax', {
                "contentType": "application/json; charset=utf-8",
                dataType: "json",
                "url": "service/agimconfig/",
                "type": "POST",
                "data": function ( d ) {
                    console.log("data");
                    d.search = $scope.searchData || {}; //search criteria
                    return JSON.stringify(d);
                }
            })
            .withOption('processing', true)
            .withOption('serverSide', true)
            .withOption('filter', false)
            .withPaginationType('full_numbers');

        $scope.dtColumns = [
            DTColumnBuilder.newColumn('configKey').withTitle('Config Key'),
            DTColumnBuilder.newColumn('configValue').withTitle('Config Value'),
            DTColumnBuilder.newColumn('configGroup').withTitle('Config Group'),
            DTColumnBuilder.newColumn('description').withTitle('Description'),
            DTColumnBuilder.newColumn('remark').withTitle('remark')
        ];

        $scope.$on('event:dataTableLoaded', function(event, data) { 
            console.log('event:dataTableLoaded:'+data); 
            $scope.tableId = data.id;

            $scope.search = function() {
                $scope.searchData = angular.copy($scope.criteria);
                console.log("search");
                $('#'+$scope.tableId).DataTable().ajax.reload();
            };
        });
    }).
...

In my opinion, it very complicated. I have no idea how to implement this scenario in other simple way. Do you have suggestions?

Thank you.

[l-lin]

Nice catch 👍
This was a bug. I correct it in the dev version.