Uncaught Error: [$injector:modulerr] in datatables
Uncaught Error: [$injector:modulerr] in datatables
Manya92
Posts: 10Questions: 2Answers: 0
While injecting datatables and datatables.buttons in angular.module like this
angular.module('myApp',['datatables', 'datatables.buttons']) I get Uncaught Error: [$injector:modulerr] in console
I do not see any other error and I have added all dependencies in my vendor folder and copied on to master.dust which is the common html template for all html files
My code is as below
angular.module('myApp',['datatables', 'datatables.buttons'])
.controller('ViewCtrl', function ($scope, $state, $filter, sharedServices, DTOptionsBuilder, DTColumnBuilder, DTColumnDefBuilder, $q, $stateParams, $sce, $interval, $uibModal) {
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withPaginationType('full_numbers')
.withDisplayLength(2)
.withDOM('pitrfl')
.withButtons([{
extend: 'excelHtml5',
}
]);
And the dependencies are:
<script src="{context.links.resourceBaseUrl|s}/vendor/datatables/js/jquery.dataTables.js"></script>
<script src="{context.links.resourceBaseUrl|s}/vendor/datatables/js/jquery.dataTables.min.js"></script>
<script src="{context.links.resourceBaseUrl|s}/vendor/datatables.net-bs/dataTables.bootstrap.js"></script>
<script src="{context.links.resourceBaseUrl|s}/vendor/datatables.net-bs/dataTables.bootstrap.min.js"></script>
<script src="{context.links.resourceBaseUrl|s}/vendor/datatables/angular-datatables/angular-datatables.min.js"></script>
<script src="{context.links.resourceBaseUrl|s}/vendor/datatables-responsive/dataTables.responsive.js"></script>
<script href="{context.links.resourceBaseUrl|s}/vendor/angular/angular.js"></script>
<script href="{context.links.resourceBaseUrl|s}/vendor/datatables/angular-datatables/angular-datatables.min.js"></script>
<script href="{context.links.resourceBaseUrl|s}/vendor/datatables.net-buttons/dataTables.buttons.min.js"></script>
<script href="{context.links.resourceBaseUrl|s}/vendor/datatables.net-buttons/buttons.colVis.min.js"></script>
<script href="{context.links.resourceBaseUrl|s}/vendor/datatables.net-buttons/buttons.flash.min.js"></script>
<script href="{context.links.resourceBaseUrl|s}/vendor/jszip/jszip.min.js"></script>
<script href="{context.links.resourceBaseUrl|s}/vendor/datatables.net-buttons/buttons.html5.min.js"></script>
<script href="{context.links.resourceBaseUrl|s}/vendor/datatables.net-buttons/buttons.print.min.js"></script>
<script href="{context.links.resourceBaseUrl|s}/vendor/datatables/angular-datatables/plugins/buttons/angular-datatables.buttons.min.js"></script>
Kindly help
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
This discussion has been closed.
Answers
It would be worth looking at StackOverflow, as there's several examples of this with diagnostic steps - see here.
Colin
Yeah I did see that and the ngRoute dependencies are already present. And moreover in my existing code we already use the below lines of code with out any issue
$scope.dtOptions = DTOptionsBuilder
.newOptions()
.withPaginationType('full_numbers')
.withOption('lengthMenu', [100,200,300,400])
.withOption('ordering', true)
//.withFixedHeader({bottom: true})
.withOption('responsive', {details:{type: 'column'}});
if ($scope.isBugs) {
$scope.dtOptions = $scope.dtOptions.withDisplayLength(300);
} else {
$scope.dtOptions = $scope.dtOptions.withDisplayLength(200);
}
But when including .withButtons() function I get the error that
angular.js:15570 TypeError: DTOptionsBuilder.newOptions(...).withPaginationType(...).withDisplayLength(...).withDOM(...).withButtons is not a function at new <anonymous> (app.bundle.js:3689
So I included datatables and datatables.buttons in angular.module('myApp',['datatables', 'datatables.buttons']) and then I get Uncaught Error: [$injector:modulerr]
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withPaginationType('full_numbers')
.withDisplayLength(2)
.withDOM('pitrfl')
.withButtons([{
extend: 'excelHtml5',
}
]);
Yeah I did see that and the ngRoute dependencies are already present.
Moreover the below lines of code work fine in the code already.
$scope.dtOptions = DTOptionsBuilder
.newOptions()
.withPaginationType('full_numbers')
.withOption('lengthMenu', [100,200,300,400])
.withOption('ordering', true)
.withOption('responsive', {details:{type: 'column'}});
It is only adding .withButtons() function which gives the below error even after adding all dependencies
TypeError: DTOptionsBuilder.newOptions(...).withPaginationType(...).withDisplayLength(...).withDOM(...).withButtons is not a function
And when I added datatables and datatables.buttons in angular.module angular.module('myApp',['datatables', 'datatables.buttons']) to fix the above error, I get the below error
Uncaught Error: [$injector:modulerr]
So am not sure what to be done next
Could you try using
datatables.netanddatatables.net-buttonsinstead? Those are the names of our npm distribution modules.But beyond that, I honestly don't know, I've not used the third party angular integration. It might be worth asking them.
Allan
Sure will try that. So what is the third party here? The datatable modules? I installed them with bower.
And for export datatable into excel or pdf, we have to have the datatable buttons JS files right? Sorry am new to this. So don't mind me if my question is not correct.
I want to export my datatable with child rows into excel, so thought will use excelHtml5 for that
The Angular integration. We develop and provide DataTables and its extensions such as Buttons, but you are using a wrapper for Angular which is not provided or supported by us.
The export functionality currently does not support exporting child row's I'm sorry to say.
Allan
This is not a simple task but I have a thread show one way to implement exporting child detail rows to Excel.
Kevin
Sure will try that..but when I use (#tableid).Datatable() I get the error that Datatable() is not a function
My columns are defined as below
$scope.dtColumnDefs = {
open: [
DTColumnDefBuilder.newColumnDef(1).notSortable(),
DTColumnDefBuilder.newColumnDef(2).notSortable(),
DTColumnDefBuilder.newColumnDef(5).notSortable(),
DTColumnDefBuilder.newColumnDef(6).notSortable(),
DTColumnDefBuilder.newColumnDef(7).notSortable()
],
closed: [
DTColumnDefBuilder.newColumnDef(1).notSortable(),
DTColumnDefBuilder.newColumnDef(2).notSortable(),
DTColumnDefBuilder.newColumnDef(5).notSortable(),
DTColumnDefBuilder.newColumnDef(8).notSortable(),
DTColumnDefBuilder.newColumnDef(9).notSortable(),
DTColumnDefBuilder.newColumnDef(10).notSortable(),
DTColumnDefBuilder.newColumnDef(11).notSortable(),
DTColumnDefBuilder.newColumnDef(12).notSortable()
]
}
Will the above solution still work for this?
(#tableid).Datatable()isn't correct. Try$("#tableid").Datatable(). Notice the"around#tableid.Kevin
Yeah I misspelled here. $("#tableid").Datatable() only did not work for me
I got this working somehow.I mean the initial question which I had posted. Now my export button what ever I try appears above search button.Is it possible to be place it on the right side of search button?
The
domoption is used to control the placement of the Datatables elements.Kevin
I did try the combination of below but the button still appears on top
dom : "<'row'<'col-sm-3'l><'col-sm-6 text-center'B><'col-sm-3'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>"
div.dt-buttons {
position: relative;
float: right;
}
Have I gone wrong anywhere here?
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Sure will do