CODEWITHSUNDEEP
angularjsdatatablesangular-promise
DBrown2207
DBrown2207

Reputation: 179

Angular-datatables adding a column to a table loaded via promise

Already tried:

Similar question to the one solved in a previous question about promise functions. Having searched through all of this I still can't quite understand what to do with my following problem:

Problem:

I am trying to load in user specified data to an angular-datatable table. The user can select which fields they want to view. The best way I could find to do this was by loading the column data via promise.

However I also want to add an actions column to delete and edit rows of data so I am trying to push this column data onto the settings array. This of course does not work because it is a promise object not the actual array.

I have no idea how to arrange the functions in such a way to add the last column this way (I'm a reasonably new developer in training). Here is the extract of code from the controller:

function angularDataTable(DTOptionsBuilder, DTColumnBuilder, $q, $resource) {
    var vm = this;
    vm.dtOptions = DTOptionsBuilder.fromSource('resources/customerData.json')
            .withPaginationType('full_numbers');
    vm.dtColumns = $resource('resources/fieldSelection.json').query().$promise;
    //So I know this is the incorrect way to work with promise objects but I don't know how to rearrange it to work.
    vm.dtColumns.push(DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable().renderWith(actionsHtml));
    vm.edit = edit;
    vm.delRow = deleteRow;
    
    function actionsHtml(data, type, full, meta) {
        return '<button class="btn btn-warning" ng-click="table.edit(' + data.id + ')">' +
            '   <i class="fa fa-edit"></i>' +
            '</button>&nbsp;' +
            '<button class="btn btn-danger" ng-click="table.delRow(' + data.id + ')">' +
            '   <i class="fa fa-trash-o"></i>' +
            '</button>';
    }
    
    function edit(id) {
        console.log('edit');
    }
    function deleteRow(id) {
        console.log(id);
    }
}

Full code on github

Upvotes: 1

Views: 6340

Answers (1)

Thomas Hambach
Thomas Hambach

Reputation: 307

Look into the tabletools section http://l-lin.github.io/angular-datatables/#/withTableTools

Additionally, if you define your columns in your controller you can hide and show columns using notVisibile() and visible(). See http://l-lin.github.io/angular-datatables/#/rerender for an example.

Upvotes: 1

Related Questions