Uncaught Error: [$injector:modulerr] in datatables

Manya92

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.

colin

It would be worth looking at StackOverflow, as there's several examples of this with diagnostic steps - see here.

Colin

Manya92

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);
}

    $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()
      ]
    }

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',
}
]);

Manya92

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

allan

Could you try using datatables.net and datatables.net-buttons instead? 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

Manya92

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

allan

So what is the third party here?

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.

I want to export my datatable with child rows into excel, so thought will use excelHtml5 for that

The export functionality currently does not support exporting child row's I'm sorry to say.

Allan

kthorngren

I want to export my datatable with child rows into excel, so thought will use excelHtml5 for that

This is not a simple task but I have a thread show one way to implement exporting child detail rows to Excel.

Kevin

Manya92

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?

kthorngren

(#tableid).Datatable() isn't correct. Try $("#tableid").Datatable(). Notice the " around #tableid.

Kevin

Manya92

Yeah I misspelled here. $("#tableid").Datatable() only did not work for me

Manya92

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?

kthorngren

The dom option is used to control the placement of the Datatables elements.

Kevin

Manya92

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?

colin

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

Manya92

Sure will do