Refreshing Jquery Datatables after upload from Modal window

I would like to have your opinion about with what Im currently experiencing. I have a datatable then I added an upload. This upload is catered on a modal form. What I want is that when the upload finished, an alert box will pop, then close the modal and then refresh the datatable i have.

This is how i initialize my table

var initDataTable = function () {
        var oTable = $('#orderTable').DataTable({
            autoWidth: false,
            dom: "<'pad-5-t'<'col-sm-8'<'ctb'>Bl><'col-sm-4'f>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row push-5-l push-5-r'<'col-sm-5'i><'col-sm-7'p>>",
            order: [[2, "desc"]],
            buttons: [
            {
                extend: 'colvis', text: '<i class="fa fa-eye"></i> Visibility', className : 'btn-sm', stateChange: function () {
                }

            }],
            deferRender: true,
            columns:
//all other column definition, buttons, and scripts
}

This function is called using

table = initDataTable();

So, whenever I called

 $('#orderTable').Datatable().ajax.reload();

The datatable refresh but when I uploaded an excel file on my modal, uploading completed, shown an alert box but the console says

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

This is my ajax call for the modalupload

 $(document).off('submit', "#modealupload");
    $(document).on('submit', "#modealupload", function (e) {
        if (e.preventDefault()) {

        }
        else{
            debugger;
            var formData = new FormData();
            var fileUpload = $("#File1").get(0);
            var files = fileUpload.files;
            formData.append("io", files[0]);
            $.ajax({
                url: '../api/order/Order/UploadIO',
                type: "POST",
                contentType: false,
                processData: false,
                data: formData,
                success: function (data) {
                    if (data.success) {
                        alert(data.message);
                        $('#modealupload').modal('hide');
                        $('#orderTable').Datatable().ajax.reload(); //error occurs here
        
                    }
                },
                error: function (data) {
                    alert("Upload Failed");
                }

            });
        }
        
    });

I just want to know why and how did the error occurred.

I have initiated the datatable.js and jquery on my _Layout.cshtml page

_layout

 <environment names="Development,Staging,Production">
                <script src="~/assets/js/core/jquery.min.js"></script>
                <script src="~/assets/js/core/bootstrap.min.js"></script>
                <script src="~/assets/js/core/jquery.slimscroll.min.js"></script>
                <script src="~/assets/js/core/jquery.scrollLock.min.js"></script>
                <script src="~/assets/js/core/jquery.appear.min.js"></script>
                <script src="~/assets/js/core/jquery.countTo.min.js"></script>
                <script src="~/assets/js/core/jquery.placeholder.min.js"></script>
                <script src="~/assets/js/core/js.cookie.min.js"></script>
                <script src="~/assets/js/app.js"></script>
                <!-- Page Plugins -->
                <script src="~/assets/js/plugins/slick/slick.min.js"></script>
                <script src="~/assets/js/plugins/chartjs/Chart.min.js"></script>
                <script src="~/assets/js/plugins/datatables/jquery.dataTables.min.js"></script>
                <script src="~/assets/js/pages/base_tables_datatables.js"></script>

Any idea is welcome and appreciated :)

Thanks!