无法读取未定义的属性“ aDataSort”

Question

我试图将分页添加到动态添加到HTML的表中。当我尝试运行代码表时，该信息已被获取，但在控制台中却出现此错误：

  

未捕获的TypeError：无法读取未定义的属性'aDataSort'

我添加了一些第三方分页方法。以下是我的代码：

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>

<script src="~/Scripts/jquery.signalR-2.3.0.min.js"></script>
<script src="~/SignalR/hubs" type="text/javascript"></script>
<script src="~/TarAndMonUI/JavaScript_DateTime/DateTimeJavaScript.js"></script>
<script src="~/TarAndMonUI/Date_Time_Picker.js"></script>
<script src="~/Scripts/controls_validation.js"></script>
<script src="~/Scripts/Pagination_1.js"></script>


<script type="text/javascript">
  $(document).ready(function() {
    $('#tbl').DataTable({
      "order": [
        [10, "dsc"]
      ],
      "lengthMenu": [5, 10, 20],
      'bSort': false,
      'aoColumns': [{
          sWidth: "45%",
          bSearchable: false,
          bSortable: false
        },
        {
          sWidth: "45%",
          bSearchable: false,
          bSortable: false
        },
        {
          sWidth: "10%",
          bSearchable: false,
          bSortable: false
        }
      ],
      "scrollY": "200px",
      "scrollCollapse": true,
      "info": true,
      "paging": true
    });

  });

  $(function() {
    $.connection.myHubMvc.client.displayStatusFromServer = function() {
      getData();
    };
    $.connection.hub.start().done(function() {
      getData();
    });

  });
  setInterval(function() {
    getData();
  }, 1000);

  function instantiateMyDatePicker() {
    $('#myDatePicker_2, #myDatePicker_1,#myDatePicker').datetimepicker({
      format: 'YYYY-MM-DD HH:mm:ss.SSS'
    });
  }

  function getData() {
    //var $tbl = $('#tbl');
    var $tbl = $('#tbl');
    var crit = $('#ddlTypes').val();
    $.ajax({
      url: 'http://localhost:58209/api/GetData',
      //data: JSON.stringify({ cri: crit }),
      data: {
        'cri': crit
      },
      //type: "POST",
      dataType: "json",
      success: function(data) {
        data = JSON.parse(data);
        var tbl = '<table id="tbl" class="table table-striped table-bordered">';
        tbl += '<tr><th>Type</th><th>Journey Number</th><th>Declaration Number</th><th>Risk Level</th><th>CCPID</th><tr>';
        $tbl.empty();
        for (var i = 0; i < data.length; i++) {
          tbl += '<tr class="w3-light-grey">';
          tbl += '<td>' + data[i].QueryTable + '</td>';
          tbl += '<td>' + data[i].JourneyNumber + '</td>';
          tbl += '<td>' + data[i].DeclarationNumber + '</td>';
          tbl += '<td>' + data[i].RMSChannel + '</td>';
          tbl += '<td>' + data[i].CCPID + '</td>';
          tbl += '</tr>';
        }
        tbl += '</table>';
        $tbl.html(tbl);
      },
    })
  }
</script>


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


<div>

  <form id="form1" class="form-horizontal" action="">

    <div>
      <table border="1" id="tbl" class="table table-striped table-bordered "></table>
    </div>
  </form>
</div>