How to create a callback function on angular datatable select

Question

I am having a problem on how to trigger an event when a certain data is selected using angular datatable select.

I want to enable Edit and Delete Button when there is a selected row.

Here is my code:

app.controller('SampleController', function($http, DTOptionsBuilder, DTColumnBuilder, $q) {
      var vm = this;

      vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
          var defer = $q.defer();
          $http.get("{!! url('sample/api/v1/questions?questionType=1') !!}")
            .then(function(response) {
              defer.resolve(response.data.active_question_contents);
            });

          return defer.promise;
        })
        .withDOM('frtip')
        .withPaginationType('full_numbers')
        .withDisplayLength(5)
        .withButtons([{
          text: 'Add',
          key: '1',
          action: function(e, dt, node, config) {
            alert('Add');
          }
        }, {
          text: 'Edit',
          key: '2',
          action: function(e, dt, node, config) {
            alert('Edit');
          },
          enabled: false
        }, {
          text: 'Delete',
          key: '3',
          action: function(e, dt, node, config) {
            alert('Delete');
          },
          enabled: false
        }])
        .withSelect({
          style: 'os',
          selector: 'td:first-child'
        });

I tried drawCallback but it only triggered once.

score 2 · Accepted Answer · answered Jul 15 '16 at 08:25

I already solved it! I just added this.DataTable() inside the drawCallback function.

Here is the code:

vm.dtOptions.drawCallback = function() {
     var table = this.DataTable();

     table.on('select', function() {
          alert('Selected!');
          // Enable/disable buttons here...
     });
};

How to create a callback function on angular datatable select

1 Answers1