Question

我正在使用DataTables显示来自SQL Server的数据。在父窗口中单击一个按钮时，将显示带有数据表的弹出窗口。如果数据少于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>

DataTable加载时间太长

0 个答案: