This repository was archived by the owner on Feb 2, 2025. It is now read-only.
This repository was archived by the owner on Feb 2, 2025. It is now read-only.
Custom Button not working #454
Description
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>