Getting TypeError: $(...).DataTable is not a function

Question

I'm creating a datatable to display the database results from the backend.

        <div class="box" id="table-box">
        <div class="box-body">
            <div class="row">
                <div class="shortcodes no-top-padding">
                    <div class="dataTables_wrapper table-bordered table-striped dt-bootstrap">
                        <table id="branchTable" class="table table-hover dataTable"
                               cellspacing="0" width="100%">
                            <thead>
                            <tr>
                                <th>id</th>
                                <th>Name</th>
                                <th>Address</th>
                                <th>Telephone</th>
                                <th>Email</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

I'm sending the AJAX request to the backend and it returns the data.

<script type="text/javascript">

$(document).ready(function () {

    alert("here");
    $('#branchTable').DataTable({
        "serverSide": true,
        "processing": true,
        "ordering": false,
        "searchDelay": 1000,
        "ajax": "controller/listing-branch-controller.php",
        "columns": [
            {"data": "id", "visible": false},
            {"data": "name"},
            {"data": "address"},
            {"data": "telephone"},
            {"data": "email"}

        ],
        "language": {
            "searchPlaceholder": "by Name"
        },
        "pageLength": 10
    });
});

But i keep getting this error

TypeError: $(...).DataTable is not a function

I have imported all the necessary script files as required as well.

<script type="text/javascript" src="<?php echo(getConfiguration('site_url')); ?>/js/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo(getConfiguration('site_url')); ?>/js/jquery-ui.js"></script>
<script type="text/javascript" src="<?php echo(getConfiguration('site_url')); ?>/js/jquery.placeholder.min.js"></script>
<script type="text/javascript" src="<?php echo(getConfiguration('site_url')); ?>/js/bootstrap.min.js"></script>

<script type="text/javascript" src="<?php echo(getConfiguration('site_url')); ?>/js/jquery.dataTables.min.js"></script>
<!-- Bootstrap Data Tables -->
<script type="text/javascript" src="<?php echo(getConfiguration('site_url')); ?>/js/dataTables.bootstrap.min.js">   </script>
<script type="text/javascript" src="<?php echo(getConfiguration('site_url')); ?>/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="<?php echo(getConfiguration('site_url')); ?>/js/dataTables.buttons.bootstrap.min.js"></script>

I'm failing to find where has went wrong. Any idea?

Answer 1

// you have to add datatables librairie's in your page by adding those two lines

 <script type="text/javascript"  src=" https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"> 

Answer 2

POSSIBLE CAUSES

• jQuery DataTables library is missing
• jQuery library is loaded after jQuery DataTables
• Multiple versions of jQuery library is loaded

SOLUTION

Include only one version of jQuery library version 1.7 or newer before jQuery DataTables.

LINKS

Please see jQuery DataTables: Common JavaScript console errors - TypeError: $(…).DataTable is not a function for more information.