Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Custom Button not working

See original GitHub issue

This my code and my issue is that when i m use .fromFnPromise for call json at a time custom button is not working

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="http://cdn.datatables.net/plug-ins/1.10.8/features/searchHighlight/dataTables.searchHighlight.css" rel="stylesheet">

  </head>
  <body>
    <div ng-app="datatablesSampleApp">
      <div ng-controller="SimpleCtrl as showCase" class="code">
        <datatable-wrapper>
         <table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table>
        <!--   <table datatable dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns"> -->
          </table>
        </datatable-wrapper>
      </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="http://code.angularjs.org/1.3.13/angular.js"></script>
        <script src="js/angular-resource.min.js"></script>
    <script src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://rawgithub.com/l-lin/angular-datatables/v0.4.3/dist/angular-datatables.min.js"></script>

    <script type="text/javascript">
    angular.module('datatablesSampleApp', ['datatables', 'ngResource'])
  .controller('SimpleCtrl', SimpleCtrl)
  .directive('datatableWrapper', datatableWrapper)
  .directive('customBtn', customBtn);

function SimpleCtrl(DTOptionsBuilder, DTColumnBuilder, $resource, $interval, $http) {
  var vm = this;



  vm.dtOptions =DTOptionsBuilder.fromFnPromise(function() {
            return $resource('https://rawgit.com/l-lin/angular-datatables/master/data.json').query().$promise;
        })
    .withPaginationType('full_numbers')
  // Add your custom button in the DOM
    .withDOM('<"custom-btn">lftirp');

  vm.dtColumns = [
    DTColumnBuilder.newColumn('id').withTitle('ID'),
    DTColumnBuilder.newColumn('firstName').withTitle('First name'),
    DTColumnBuilder.newColumn('lastName').withTitle('Last name')
  ];


}



/**
 * This wrapper is only used to compile your custom button
 */
function datatableWrapper($timeout, $compile) {
  return {
    restrict: 'E',
    transclude: true,
    template: '<ng-transclude></ng-transclude>',
    link: link
  };

  function link(scope, element) {
    // Using $timeout service as a "hack" to trigger the callback function once everything is rendered
    $timeout(function () {
      // Compiling so that angular knows the button has a directive
      $compile(element.find('.custom-btn'))(scope);
    }, 0, false);
  }
}

/**
 * Your custom button
 */
function customBtn() {
  return {
    restrict: 'C',
    template: '<h1>Foobar</h1>'
  };
}
    </script>
  </body>
</html>

Issue Analytics

State:
Created 8 years ago
Comments:6 (1 by maintainers)

Top GitHub Comments

1reaction

ddxycommented, Oct 8, 2015

This does not work with datatable=“ng”, Any idea for a workaround?

0reactions

trajanocommented, Mar 13, 2016

I got it to work on my case, in a hacky sort of way.

I add this to my controller

$('#user-datatable').on('draw.dt', function () {
   $compile($('.add-user-button'))($scope);
});

From what I can determine, the element for the table can be located using jQuery and the draw.dt event when it fires would have the toolbar elements already created as such I can locate the toolbar elements and compile them.