angular js datatable load using ng-click

Issue

I am using angular js data-table. currently data-table loading correctly. I use below code to load my table

HTML

<table width="100%" id="declined-table" datatable="" dt-options="dtOptionsReject"
                                dt-columns="dtColumnsReject" class="table table-bordered table-hover">
                            </table>

js file

 $scope.dtOptionsReject = DTOptionsBuilder.newOptions()
            .withOption('ajax', {
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                url: appConfig.apiUrl + "/finalizedList?status=REJECTED",
                xhrFields: { withCredentials: true },
                type: 'POST',
                data: function (d) {
                    return JSON.stringify(d);

                },
                error: function (response) {
                    ajaxErrorHandler.handle(response);
                }
            })

            .withDataProp('data')
            .withOption('processing', true)
            .withOption('serverSide', true)
            .withOption('scrollY', '400px')
            .withOption('scrollX', '100%')
            .withOption('scrollCollapse', true)

            .withOption('drawCallback', function (settings) {

            });

        $scope.dtColumnsReject = [
            DTColumnBuilder.newColumn('traceId').withTitle('Trace IDzzzzzz'),
            DTColumnBuilder.newColumn('approval.0.usr').withTitle('Name'),
            DTColumnBuilder.newColumn('approval.0.threshold').withTitle('Match Strength %'),
            DTColumnBuilder.newColumn('traceId').withTitle('Action').renderWith(function (data, type, full) {
                return '<div class="btn-group-xs">' +
                    '  <a href="" class="btn btn-flat btn-xs btn-success">' +
                    '    <i class="ion ion-eye"></i>' +
                    '  </a>' +
                    '</div>';
            }).withClass('text-center').notSortable()
        ];

When go to html page, data table is loading correctly. but now i need to load my table using ng-click. how i load my data table load using ng-click

<button ng-click="loadTable()"> load table </button>

HowI load my table using button click. thanks

Solution

I think a simple ng-if in your table and then putting your data gathering code into a function would do it.

<table ng-if="dtColumnsReject" width="100%" id="declined-table" datatable="" dt-options="dtOptionsReject" dt-columns="dtColumnsReject" class="table table-bordered table-hover">
                            </table>    


<button ng-click="loadTable()"> load table </button>

$scope.loadTable = function() {
$scope.dtOptionsReject = DTOptionsBuilder.newOptions()
            .withOption('ajax', {

            .... all your code ....

          '</div>';
        }).withClass('text-center').notSortable()
    ];
   
 }

Answered By - Kinglish