Uncaught TypeError: api.init is not a function

mwanderson71 · October 2015

Having trouble understanding what the issue is. I have tried using both a capital "D" and lowercase "d" for the datatables declaration and am still getting the same error.

In Chrome's debugger I am seeing the following error: Uncaught TypeError: api.init is not a function

This is where the error is (dataTables.buttons.js):
// DataTables dom feature option
DataTable.ext.feature.push( {
fnInit: function( settings ) {
var api = new DataTable.Api( settings );
var opts = api.init().buttons;

    return new Buttons( api, opts ).container();
},
cFeature: "B"

} );

I have updated both my version of jQuery and DataTables to latest versions to ensure that there were not any compatibility issues.

Here is a sample from the javascript (just FYI this is an ASP.Net MVC 5 application):

$(document).ready(function () {

        dTable = $('#dataAnalysis').dataTable({
            bPaginate: true,
            bServerSide: true,
            iDisplayLength: 25,
            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
            bProcessing: true,
            scrollX: true,
            scrollY: "600px",
            scrollCollapse: true,
            bAutoWidth: true,
            sServerMethod: "POST",
            fnServerParams: function( aoData ){
                aoData.push({"name": "contractorName", "value": $('#contractorName').val()});
                aoData.push({ "name": "service", "value": $('#service').val() });
            },
            sAjaxSource: "ServiceInstanceDrillDown",
            dom: 'Blfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ],
            aoColumns: [
                            {
                                "title": "CONTRACT",
                                "data": "CONTRACT"

... lots more columns follow and probably are not relevant

mangita · November 2015

@mwanderson71 did you find any solution for that?

jLinux · November 2015

@mangita are you having the same issue? Post your code here and ill look at it

Please use the proper formatting for your code, the instructions are below the reply input text box.

ankushm · February 2016

@mwanderson71 @jLinux
I am having the same issue after trying to replicate the code from datatables doc.
Please check this for me ASAP.

index.html

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.1/css/jquery.dataTables.css" />
<link rel="stylesheet" href="https://rawgithub.com/l-lin/angular-datatables/master/dist/plugins/bootstrap/datatables.bootstrap.min.css" />

<link rel="stylesheet" href="buttons.dataTables.css">
</head>
<script data-require="jquery@1.10.1" data-semver="1.10.1" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.1/js/jquery.dataTables.js"></script>

<body ng-app="datatablesSampleApp">
  <div ng-controller="SampleCtrl as showcase" class="code">
    <table datatable dt-options="showcase.dtOptions" class="table row-border hover">
      <thead>
        <tr>
          <th>ID</th>
          <th>First name</th>
          <th>Last name</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Foo</td>
          <td>Bar</td>
        </tr>
        <tr>
          <td>123</td>
          <td>Someone</td>
          <td>Youknow</td>
        </tr>
        <tr>
          <td>987</td>
          <td>Iamout</td>
          <td>Ofinspiration</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script src="https://code.angularjs.org/1.4.5/angular.js"></script>
  <script src="https://code.angularjs.org/1.4.5/angular-resource.js"></script>

  <script type="text/javascript" src="angular-datatables.js"></script>
  <script type="text/javascript" src="angular-datatables.bootstrap.js"></script>

  <script type="text/javascript" src="angular-datatables.buttons.js"></script>
  <!--script type="text/javascript" src="buttons.bootstrap.js"></script>
  <script type="text/javascript" src="buttons.jqueryui.js"></script-->
  <script type="text/javascript" src="dataTables.buttons.js"></script>
  
  <script type="text/javascript" src="app.js"></script>
</body>
</html>

app.js

(function(angular) {
  'use strict';

  angular.module('datatablesSampleApp', ['ngResource', 'datatables', 'datatables.bootstrap', 'datatables.buttons'])
    .controller('SampleCtrl', SampleCtrl);

  function SampleCtrl(DTOptionsBuilder, DTColumnBuilder) {
    var vm = this;
    // vm.dtOptions = DTOptionsBuilder.newOptions().withBootstrap();
    vm.dtOptions = DTOptionsBuilder.newOptions()
            .withBootstrap()
            .withDOM('ftip')
            .withPaginationType('full_numbers')
        // Active Buttons extension
        .withButtons([
            // 'columnsToggle',
            'copy'
        ]);
  }
})(angular);

Uncaught TypeError: api.init is not a function

Uncaught TypeError: api.init is not a function

Answers

Howdy, Stranger!

Categories

DataTables

Uncaught TypeError: api.init is not a function

Uncaught TypeError: api.init is not a function

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables