DataTable загружается слишком много времени

Question

Я использую DataTables для отображения данных с сервера SQL.При нажатии кнопки в родительском окне появляется всплывающее окно с таблицей данных.Всплывающее окно отображается правильно, если данные меньше 1000 строк.Когда данных слишком много (более 1000 строк), всплывающее окно никогда не отображается.Тот же запрос выполняется в базе данных в последние 8 секунд.Чего мне не хватает?

function my_popup() {
  $.ajax({
    type: 'POST',
    url: "../popup/getDataForPopup",
    success: function(result) {
      var data = $.parseJSON(result);
      var dataSet = [];

      for (var i = 0; i < data.length; i++) {
        var arr = ["<input type = 'button' class='btn-primary' value = 'Select' onclick ='send_parent()' data-dismiss='modal'>",
          data[i].date,
          data[i].name,
          data[i].place,
          data[i].something +
          "<input type = 'hidden' id='id_num' value = " + data[i].id_num + " >",
        ];
        dataSet.push(arr);
      }

      var table = $('#my_dataTable').DataTable({
        retrieve: true,
        paging: true,
        autoWidth: false,
        data: dataSet,
        select: {
          style: 'os',
          selector: 'td:first-child'
        },
        order: [
          [0, 'asc']
        ],
        lengthMenu: [
          [20, 40, 60, 80, 100],
          [20, 40, 60, 80, 100]
        ],
        pageLength: 40,
        columnDefs: [{
          targets: 'no-sort',
          orderable: false
        }]
      });

      $("#my_popup_modal").modal({
        backdrop: "static"
      });
    }
  });
}

Я добавил serverSide: true,, но это ничего не меняет, и, честно говоря, я не знаю, как его использовать.Я не могу понять некоторые объяснения.Мой всплывающий HTML.

<div class = "modal" id = "my_popup_modal" role = "dialog">
<div class = "modal-dialog modal-lg modal-dialog-centered" id = "popup_modal">
    <div class = "modal-content modal_block">
        <div class = "modal-header" id = "modal_header_color">
            <div class = "modal_title">User Info</div>
        </div>
        <div class = "modal-body">
            <div class = "table-responsive">
                <table class = "table table-striped table-bordered nowrap table-hover dataTable no-footer dtr-inline lbl_font_2"
                id = "my_dataTable" role = "grid" aria-describedby = "dataTables_info">
                    <thead>
                        <tr role = "row">
                            <th tabindex = "0" class = "center" aria-controls = "dataTables"
                                style = "width: 12%;" rowspan = "1" colspan = "1">Select</th>
                            <th tabindex = "0" class = "sorting center" aria-controls = "dataTables"
                                style="width: 33%;" rowspan = "1" colspan = "1">Date</th>
                            <th tabindex = "0" class = "sorting center" aria-controls = "dataTables"
                                style = "width: 38%;" rowspan = "1" colspan = "1">Name</th>
                            <th tabindex = "0" class = "sorting center" aria-controls = "dataTables"
                                style = "width: 17%;" rowspan = "1" colspan = "1">Place</th>
                            <th tabindex = "0" class = "sorting center" aria-controls = "dataTables"
                                style = "width: 17%;" rowspan = "1" colspan = "1">Something</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <div class = "row">
                <button type = "button" id = "btn_close" class = "btn_close" data-dismiss = "modal">Close</button>
            </div>
        </div>
        <div class = "modal-footer" id = "modal_footer_color"></div>
    </div>
</div>