angular 使用 ng-click 加载 js 数据表

Question

我正在使用 angular js 数据-table。当前数据-table 加载正确。我使用下面的代码加载我的 table

HTML

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

js文件

 $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()
        ];

转到 html 页面时，数据 table 正在正确加载。但现在我需要使用 ng-click 加载我的 table。我如何加载我的数据 table 使用 ng-click 加载

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

我如何使用单击按钮加载 table。谢谢

Answer 1

我认为在您的 table 中使用一个简单的 ng-if 然后将您的数据收集代码放入一个函数中就可以了。

<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()
    ];
   
 }

angular 使用 ng-click 加载 js 数据表

angular js datatable load using ng-click

javascript

datatable

angularjs