Skip to content
This repository was archived by the owner on Feb 2, 2025. It is now read-only.

Custom Button not working #454

Closed
Gajendrasinh opened this issue Sep 24, 2015 · 6 comments
Closed

Custom Button not working #454

Gajendrasinh opened this issue Sep 24, 2015 · 6 comments
Labels
duplicate

Comments

@Gajendrasinh
Copy link

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>
@l-lin
Copy link
Owner

l-lin commented Sep 27, 2015

Duplicate of #402.
There is an existing example on codepen and I update my example. I can't do more.

@l-lin l-lin closed this as completed Sep 27, 2015
@ddxy
Copy link

ddxy commented Oct 8, 2015

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

@vmkumar
Copy link

vmkumar commented Oct 16, 2015

fromFnServerData call time also custom button not displaying

@trajano
Copy link

trajano commented Mar 13, 2016

The problem I see is when you reach the timeout function the additional classes are not yet rendered.

   link: function (scope, element) {
       $timeout(function () {
           console.log(element.html()); // if you look at your console it does not have the whole table rendered yet.
           console.log(element.find('.custom-element)) // if you look at your console and expand it should show zero length data.
        }, 0, false);

@trajano
Copy link

trajano commented Mar 13, 2016

I think it needs to be bound with https://datatables.net/reference/option/initComplete somehow.

@trajano
Copy link

trajano commented 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.

@mrjutsu mrjutsu mentioned this issue Dec 13, 2016
Closed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
duplicate
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@trajano @ddxy @l-lin @vmkumar @Gajendrasinh