[英]reducing html table's loading time with large numbers of data being queried | PHP, HTML, SQLSERVER 2012
I'm experiencing a problem when loading the data from my database, the data is somewhat large enough to cause a delay.我在从我的数据库加载数据时遇到问题,数据有点大到导致延迟。
I tried to add this in my code, but still not enough.我试图在我的代码中添加它,但仍然不够。
.fixed-table {
table-layout: fixed;
}
I stumbled upon this guide.我偶然发现了这个指南。 https://patdavid.net/2019/02/displaying-a-big-html-table/ .
https://patdavid.net/2019/02/displaying-a-big-html-table/ 。 So i tried to implement it, unfortunately my loading time is still the same.
所以我尝试实现它,不幸的是我的加载时间仍然相同。
With this line, how will I approach this有了这条线,我将如何处理这个问题
I set the table to display: none;
我将表格设置为显示:无; initially and once the document was ready I set it back to display: table;
最初,一旦文档准备好,我将其重新设置为 display: table; (relying on JavaScript to do this).
(依靠 JavaScript 来做到这一点)。
This is my table script这是我的表格脚本
/* 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 */
This is the table这是桌子
<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>
The total data being loaded is around 300,000-500,000 .加载的总数据约为300,000-500,000 。 It's taking so long for it to load.
加载它需要很长时间。 up to 60-70 seconds.
长达 60-70 秒。 Is there a way for us to reduce this time?
有没有办法让我们减少这个时间? Is the structure of my table/query wrong, is there any possible solution to reduce this delay?
我的表/查询的结构是否错误,是否有任何可能的解决方案来减少这种延迟?
I tried to use clusterize.js, but I can't seem to be able to implement it.我尝试使用 clusterize.js,但我似乎无法实现它。
ADDENDUM: Is there a way for this to be implemented into SQL SERVER 2012?
附录:有没有办法将其实现到 SQL SERVER 2012 中? https://github.com/DataTables/DataTables/blob/master/examples/server_side/scripts/server_processing.php
https://github.com/DataTables/DataTables/blob/master/examples/server_side/scripts/server_processing.php
I'm planning to do this via Server-Side, but I'm worried that I may change all the tables that I did.我计划通过服务器端执行此操作,但我担心可能会更改我所做的所有表。
use data tables jQuery plug-in, it can handle displaying large data in the table representation with less time使用数据表jQuery插件,它可以用更少的时间处理以表表示形式显示大数据
Reference :: https://datatables.net/
I personally used it.我个人使用过。 When I am trying to display large chunk of data from mysql using normal table references, it used to take lot of time to load Using datatables jQuery plug-in solved the issue
当我尝试使用普通表引用显示来自 mysql 的大量数据时,它曾经需要花费大量时间来加载使用数据表 jQuery 插件解决了这个问题
最好使用分页和过滤来使表格可用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.