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

Basically I create a side bar dynamically and import this html using ajax method...

When a page loaded side-bar showed on the other hand table show in this error cause of side bar ...

When I loaded a side bar after the data-table it's response late and side bar show after loaded a table. (this process take a lot of time and If want to move on the second page sidebar can not show until data-table loaded)

But I want to show both thing same time.

here is snippet of js `$(document).ready(function () { alterSpan() });

function alterSpan() { $('#dataTableId').css({ display: 'block' }) $('html,body').animate({ scrollTop: $("#collapseExample").offset().top }, 'slow'); dataTable() } function dataTable() { var requestBody = JSON.stringify({ "app_id": '', "namespace": '', "auth_token": '***',

});
$.ajax({
    url: '***',
    method: POST,
    contentType: Content_Type,
    dataType: 'json',
    data: requestBody,
    success: function (data, textStatus, xhr) {
        var apiData = data

        if (apiData.length > 0) {

            $('#create_td').DataTable().clear().destroy();
            tableData = $('#create_td').DataTable({
                dom: 'Bfrtip',
                select: true,
                colReorder: true,
                buttons: [{
                    extend: 'collection',
                    orientation: 'landscape',
                    text: '<i class="material-icons" title="click to export data" style="color: #B71D1D;">settings</i>',
                    buttons: [
                        { extend: 'copy', titleAttr: 'copy', className: 'btn-exportable' },
                        {
                            extend: 'excel', titleAttr: 'excel', className: 'btn-exportable'
                        },
                        { extend: 'csv', titleAttr: 'csv', className: 'btn-exportable' },
                        { extend: 'pdf', titleAttr: 'pdf', className: 'btn-exportable' },
                        { extend: 'print', titleAttr: 'print', className: 'btn-exportable' },
                    ]
                }
                ],
                "lengthChange": false,
            });
            for (var i in apiData) {

                var myDate = new Date(apiData[i].eve_sec * 1000);
                var formated = myDate.toGMTString();
                var date = formated + ''
                var ab = timeFormat(date)
                var splited = date.split(" ")

                if (typeof apiData[i].description == "object") {
                    var lop = apiData[i].description
                    for (var j = 0; j < lop.length; j++) {
                        tableData.row.add([
                            '<span style="color:#000000; font-size: 14px;">' + lop[j] + '</span>',
                            '<span style="color:#000000; font-size: 14px;">' + apiData[i].type + '</span>',
                            '<span style="color:#000000; font-size: 14px;">' + ab + '</span>',
                        ]).draw()
                    }
                }
                if (typeof apiData[i].description != "object") {
                    console.log(apiData[i])
                    tableData.row.add([
                        '<span style="color:#000000; font-size: 14px;">' + apiData[i].description + '</span>',
                        '<span style="color:#000000; font-size: 14px;">' + apiData[i].type + '</span>',
                        '<span style="color:#000000; font-size: 14px;">' + ab + '</span>',
                    ]).draw()
                }
            }
        }

    },
    error: function (xhr, status, error) {}
});

and html snippet `<!DOCTYPE html>

Description	Type	Time

gurayyarar / AdminBSBMaterialDesign

Uncaught TypeError: $(...).DataTable is not a function #182