查询大量数据，减少html表的加载时间| PHP、HTML、SQLSERVER 2012

Question

我在从我的数据库加载数据时遇到问题，数据有点大，会导致延迟。

我尝试在我的代码中添加这个，但仍然不够。

.fixed-table {
    table-layout: fixed;
}

我偶然发现了这个指南。 https://patdavid.net/2019/02/displaying-a-big-html-table/。所以我尝试实现它，不幸的是我的加载时间仍然相同。

有了这条线，我将如何处理这个

我将表格设置为显示：无；最初，一旦文档准备好，我将其重新设置为 display: table; （依靠 JavaScript 来做到这一点）。

这是我的表格脚本

/* FOR CORPORATE DATA TABLE START */
function format ( dataSource ) {
    var html = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;" class="fixed-table table table-bordered">';
    for (var key in dataSource){
        html += '<tr>'+
                   '<td>' + key             +'</td>'+
                   '<td>' + dataSource[key] +'</td>'+
                '</tr>';
    } return html += '</table>';  }
var earnings_amendment_table = $('#earnings_amendment').DataTable({});

      // Add event listener for opening and closing details
      $('#earnings_amendment').on('click', 'td.details-control', function () {
          var tr = $(this).closest('tr');
          var row = earnings_amendment_table.row(tr);

          if (row.child.isShown()) {
              // This row is already open - close it
              row.child.hide();
              tr.removeClass('shown');
          } else {
              // Open this row
              row.child(format({
                  'Particulars : ' : tr.data('key-1'),
                  'Account Type : ' : tr.data('key-2'),
                  'Date Due : ' :  tr.data('key-3')
              })).show();
              tr.addClass('shown');
          } });
/* FOR CORPORATE DATA TABLE END */

这是桌子

    <div class="box-body">
              <table id="earnings_amendment" class="fixed-table table table-bordered">
                <thead>
                  <th></th>
                  <th>Reference ID.</th>
                  <th>Reference No.</th>
                  <th>Employee Name</th>
                  <th>Account Title</th>
                  <th>Amount</th>
                  <th>Activity</th>
                  <th>Posted By</th>
                  <th>Validated By</th>
                  <th>Noted By</th>
                  <th>Tools</th>
                </thead>
                <tbody>
                <?php
$sql = "
select earningsamendment.particulars,earningsamendment.accounttype,earningsamendment.datedue,
employeemasterfile.lastname,employeemasterfile.firstname,employeemasterfile.middlename,
referenceno, accounttitle, max(credit) as credit, max(debit) as debit, max(referenceid) as referenceid, earningsamendment.employeeidno,
earningsamendment.postedby, approvedby, notedby
from earningsamendment
left join employeemasterfile on earningsamendment.employeeidno= employeemasterfile.employeeidno
WHERE earningsamendment.accounttitle='$accounttitle' AND 
YEAR(earningsamendment.dateposted)='$year'
group by referenceno, earningsamendment.employeeidno, accounttitle, earningsamendment.postedby, approvedby,
notedby,employeemasterfile.lastname,employeemasterfile.firstname,employeemasterfile.middlename,
earningsamendment.particulars,earningsamendment.accounttype,earningsamendment.datedue
";
                    $query = sqlsrv_query($conn, $sql, array(), array("Scrollable" => SQLSRV_CURSOR_KEYSET));
                    while($row = sqlsrv_fetch_array($query, SQLSRV_FETCH_ASSOC)){
                      echo "
                      <tr data-key-1='".$row['particulars']."' data-key-2='".$row['accounttype']."' data-key-3='".$row['datedue']."'>
                        <td class='details-control'></td>
                          <td>".$row['referenceid']."</td>
                          <td>".$row['referenceno']."</td>
                          <td>".$row['lastname']." ".$row['middlename']." ".$row['firstname']."</td>
                          <td>".$row['accounttitle']."</td>
                          <td>".$row['credit']."</td>
                          <td>".(($row['debit']==$row['credit']) ? 'PAID' : 'FOR TAKE UP' )."</td>
                          <td>".$row['postedby']."</td>
                          <td>".$row['approvedby']."</td>
                          <td>".$row['notedby']."</td>
                          <td>
                            <button class='btn btn-success btn-sm edit btn-flat' data-id='".$row['referenceid']."'><i class='fa fa-edit'></i> Preview</button>

                            <button class='btn btn-danger btn-sm delete btn-flat' data-id='".$row['referenceid']."'><i class='fa fa-trash'></i> Delete</button>

                        " ?>
                            <?php if (empty($row['approvedby'])) { echo " <button class='btn btn-warning btn-sm approve btn-flat' data-id='".$row['referenceid']."'><i class='fa fa-check-square-o'></i> Approve</button> "; } ?>

                            <?php if (empty($row['notedby'])) { echo " <button class='btn btn-primary btn-sm note btn-flat' data-id='".$row['referenceid']."'><i class='fa fa-arrow-circle-right'></i> Note</button> "; } ?>

                            <?php "</td>
                        </tr>
                      ";
                    }
                  ?>
                </tbody>
              </table>
            </div>

加载的总数据约为 300,000-500,000。它需要很长时间才能加载。长达 60-70 秒。我们有办法减少这个时间吗？我的表/查询的结构是否错误，是否有任何可能的解决方案来减少这种延迟？

我尝试使用 clusterize.js，但我似乎无法实现它。

附录：有没有办法在 SQL SERVER 2012 中实现这一点？https://github.com/DataTables/DataTables/blob/master/examples/server_side/scripts/server_processing.php

我打算通过服务器端进行此操作，但我担心我可能会更改我所做的所有表。

Answer 1

使用数据表格jQuery插件，它可以用更少的时间处理在表格表示中显示大数据

Reference :: https://datatables.net/

我个人使用它。 当我尝试使用普通表引用显示来自 mysql 的大量数据时，它过去需要花费大量时间来加载 使用datatables jQuery插件解决了这个问题

Answer 2

最好使用分页和过滤来使表格可用。