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

Prashant3110

I'm having issue using dataTable , using "DataTables 1.10.11"

I have included dataTable files in the sequence

<script src="vendor/plugins/DataTable/datatables.min.js" type="text/javascript"></script>
<script src="vendor/plugins/DataTable/tableTools/dataTables.tableTools.min.js" type="text/javascript"></script>
<script src="vendor/plugins/DataTable/dataTables.bootstrap.js" type="text/javascript"></script>

I have requirement like on click a popup will open with row detail, where user will take "Approve" or "Reject" action.

basic on action i have to update the dataTable with it's action taken.

I did this angularJs and Jquery code but getting error when I'm calling createDatatable() function second time

(function ()
{
"use strict";
angular.module('users-user-list', [])
//Controller
.controller('UserListCtrl', ['UserService', '$filter', '$cookieStore', '$window', function (UserService, $filter, $cookieStore, $window)
{
angular.element(document).ready(function ()
{
UserService.GetAlluserlist(function (response)
{
userlist.count = response.count;
userlist.userlistdata = response.response;
//response.response is my actual data(Json)
userlist.backup = userlist.userlistdata;
}, function (response)
{
});
});

userlist.BAckToList = function ()
{
myTable.destroy();
    $('#TableData').empty();
    userlist.userlistdata = "";
    userlist.userlistdata = userlist.backup;
    ```//here I'm re binding user data using ng-repeat
    createDatatable();
    //second call to createDatatable()
    ```//On this function call getting the error
}

} ]);} ());

var myTable;

$(document).ready(function ()
{
setTimeout(createDatatable, 200);
//First call to createDatatable()
});

function createDatatable()
{
myTable = $('#userList').DataTable({
"sDom":
"<'row'<'col-md-4'f><'col-md-4 text-center sm-left'T C><'col-md-4'l>r>" + "t" +
"<'row'<'col-md-4 sm-center'i><'col-md-4'><'col-md-4 text-right sm-center'p>>",
"oLanguage": {
"sSearch": ""
},
"oTableTools": {
"sSwfPath": "vendor/plugins/DataTable/copy_csv_xls_pdf.swf",
"aButtons": [
{
"sExtends": "collection",
"sButtonText": 'Download as <span class="caret" />',
"aButtons": ["csv", "xls", "pdf"]
}
]
},

    "fnInitComplete": function ()
    {
        $('.dataTables_filter input').attr("placeholder", "Search");
        $('div.dataTables_filter input').addClass('form-control');
        $('div.dataTables_length select').addClass('form-control');
        $('#userList_filter').addClass('pull-left');
        $('#userList_length').addClass('pull-right');
    }
});

}

Thanks for any help

allan

The most common cause for this is that jQuery is loaded twice on the page.

I'd suggest checking for that in the first instance. If it isn't that, we'd need a link to the page.

Allan