jquery.js：3850未捕获的TypeError：无法读取使用ajax作为数据源的数据表的undefined属性“ style”

Question

            <div class="kt-portlet__body">

            <!--begin: Datatable -->
            <table class="table table-striped- table-bordered table-hover table-checkable" id="kt_table_1">
                <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Phone</th>
                    <th>Car</th>
                    <th>Occupation</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
                </thead>
            </table>

            <!--end: Datatable -->
        </div>

js

"use strict";
var KTDatatablesDataSourceAjaxServer = function() {

    function getUrlVars() {
        var vars = {};
        var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
            vars[key] = value;
        });
        return vars;
    }

    var initTable1 = function() {
        var table = $('#kt_table_1');
        var date = getUrlVars()['date'];
        var tme = getUrlVars()['tme'];
        var batch = getUrlVars()['batch'];
        // begin first table
        console.log('/data/assigned/?date='+date+'&tme='+tme+'&batch='+batch);
        table.DataTable({
            responsive: true,
            searchDelay: 500,
            processing: true,
            serverSide: true,
            ajax: '/data/assigned/?date='+date+'&tme='+tme+'&batch='+batch,
            columns: [
                {data: 'id'},
                {data: 'name'},
                {data: 'phone'},
                {data: 'car'},
                {data: 'occupation'},
                {data: 'status'},
                {data: 'Actions', responsivePriority: -1},
            ],
            columnDefs: [
                {
                    targets: -1,
                    title: 'Actions',
                    orderable: false,
                    render: function(data, type, full, meta) {
                        return `
                        <span class="dropdown">
                            <a href="#" class="btn btn-sm btn-clean btn-icon btn-icon-md" data-toggle="dropdown" aria-expanded="true">
                              <i class="la la-ellipsis-h"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" href="javascript:void(0)"><i class="la la-leaf"></i> Booking</a>
                                <a class="dropdown-item" href="javascript:void(0)"  onclick="editStatus(`+ full['id'] +`)"><i class="la la-edit"></i>  Update Status</a>
                            </div>
                        </span>
                        <a href="#" class="btn btn-sm btn-clean btn-icon btn-icon-md" title="View">
                          <i class="la la-edit"></i>
                        </a>`;
                    },
                },
                {
                    "targets": [ 0 ],
                    "visible": false,
                    "searchable": false
                },
                {
                    targets: -3,
                    render: function(data, type, full, meta) {
                        var status = {
                            1: {'title': 'Pending', 'class': 'kt-badge--brand'},
                            2: {'title': 'Delivered', 'class': ' kt-badge--danger'},
                            3: {'title': 'Canceled', 'class': ' kt-badge--primary'},
                            4: {'title': 'Success', 'class': ' kt-badge--success'},
                            5: {'title': 'Info', 'class': ' kt-badge--info'},
                            6: {'title': 'Danger', 'class': ' kt-badge--danger'},
                            7: {'title': 'Warning', 'class': ' kt-badge--warning'},
                        };
                        if (typeof status[data] === 'undefined') {
                            return data;
                        }
                        return '<span class="kt-badge ' + status[data].class + ' kt-badge--inline kt-badge--pill">' + status[data].title + '</span>';
                    },
                },
                {
                    targets: -2,
                    render: function(data, type, full, meta) {
                        var status = {
                            0: {'title': 'Unused', 'state': 'danger'},
                            1: {'title': 'Assigned', 'state': 'primary'},
                            2: {'title': 'Follow Up', 'state': 'warning'},
                            3: {'title': 'Booking Confirmed', 'state': 'success'},
                        };
                        if (typeof status[data] === 'undefined') {
                            return data;
                        }
                        return '<span class="kt-badge kt-badge--' + status[data].state + ' kt-badge--dot"></span>&nbsp;' +
                            '<span class="kt-font-bold kt-font-' + status[data].state + '">' + status[data].title + '</span>';
                    },
                },
            ],
        });
    };

    return {

        //main function to initiate the module
        init: function() {
            initTable1();
        },

    };

}();

jQuery(document).ready(function() {
    KTDatatablesDataSourceAjaxServer.init();
});

当我在本地环境中使用它但不能在实际环境中使用时，它可以正常工作。 在本地环境中，我什至没有收到任何警告。 我尝试更改列数，但仍无法在我的网站上使用。我已经在上面附加了我的HTML和JS代码。

请看看。