我有一个php文件，它从多个sql表中选择大量数据。当然，完成整个过程需要很长时间。我想显示一个进度条，它将表示脚本运行的进度。如何显示进度条？下面的脚本显示了php文件的一部分。
<?php
//RIGHT(AdmitCode,1), PartCode, MID(AdmitCode,2,2), MID(AdmitCode,1,1) DESC, RollCode
$query = "SELECT * FROM students1 ORDER BY PartCode, AdmitCode, yearcode desc, RollCode";
$result = mysql_query($query);
// start a table tag in the HTML
echo "<table border='1' align='center' style='border-collapse:collapse' width='110%'>";
echo "<caption>
<h2>List of candidates for Three year Degree
(Honours/General) Programme Examination-".$bx1." (".$bx2.")
</h2>
</caption>";
//$row['index'] the index here is a field name
echo "<tr bgcolor=''>
<th> Sl. No </th>
<th>ID </th>
<th> Semester </th>
<th> Roll No </th>
<th> Registration No</th>
<th> Name </th>
<th> Honours </th>
<th> Elective-1 </th>
<th> Elective-2 </th>
<th> Elective-3 </th>
<th> MIL </th>
<th> Foundation </th>
<th> Soft studies </th>
<th> Syllabus </th>
</tr>";
$ty=0;
while($row = mysql_fetch_array($result)){ //Creates a loop to loop through results
$ty++;
if ($ty%2==0)
echo "<tr bgcolor='pink'>";
else
echo "<tr>";
echo "<td align='center'>$ty</td>
<td align='center'>" . $row['StudentID']." </td>
<td align='center'>" . $row['PartCode']."</td>
<td align='center'>" . $row['AdmitRollNo'] . "</td>
<td align='center'>" . $row['RegistrationNo']. "</td>
<td align='left'>" . $row['Name'] . "</td>
<td align='center'>" . $row['HonoursSubject'] . "</td>
<td align='center'>". $row['ElectiveSubject1'] . "</td>
<td align='center'>". $row['ElectiveSubject2'] . "</td>
<td align='center'>". $row['ElectiveSubject3'] . "</td>
<td align='center'>". $row['MIL'] . "</td>
<td align='center'>". $row['Foundation'] . "</td>
<td align='center'>". $row['SoftStudies'] . "</td>
<td align='center'>". $row['Syllabus'] . "</td>
</tr>";
}
echo "</table>"; //Close the table in HTML
答案 0 :(得分：1)
通常，要实现良好的进度条，您需要从执行工作的层（即mysql数据库）中获取进度指示器。我不知道，mysql提供了这样的功能。
因此，您不得不估计操作可能会持续多长时间（即从过去的查询中获取或从查询参数中获取）并且只是实现javascript进度条（JQueryUI提供了一个很好的），这只是基于时间的。
或者，您可以使用微调器指示您不知道此过程实际运行了多长时间。
答案 1 :(得分：0)
你可以为表添加div coantainer并有id页面并添加css，这显示加载图像，直到页面满载。
例如
<div id="page">
<table>
</table>
</div>
css
<style>
#page {
display: none;
}
#loading {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
// background-image: url(loading_spinner.gif);
background-image:url("loading_spinner.gif");
background-repeat: no-repeat;
background-position: center;
}
</style>
<script>
$(window).load(function() {
$('#page').show();
$('#loading').hide('slow');
});
</script>
在您的网页中添加此js代码，这将对您有所帮助。
答案 2 :(得分：0)
您可以使用以下简单代码
<?php
//header('Content-Type: text/event-stream');
// recommended to prevent caching of event data.
header('Cache-Control: no-cache');
//long_process.php
for($i=1;$i<=3;$i++){
//do something
echo '<br>processing...';
ob_flush();
flush();
sleep(1);
}
echo 'CLOSE', 'Process complete';
?>
或使用如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<br />
<input type="button" onClick="startTask()" value="Start Long Task" />
<input type="button" onClick="stopTask();" value="Stop Task" />
<br />
<br />
<p>Results</p>
<br />
<div id="results" style="border:1px solid #000; padding:10px; width:300px; height:250px; overflow:auto; background:#eee;"></div>
<br />
<progress id='progressor' value="0" max='100' style=""></progress>
<span id="percentage" style="text-align:right; display:block; margin-top:5px;">0</span>
</body>
</html>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var es;
function startTask() {
es = new EventSource('bar2.php');
//a message is received
es.addEventListener('message', function(e) {
var result = JSON.parse( e.data );
addLog(result.message);
if(e.lastEventId == 'CLOSE') {
addLog('Received CLOSE closing');
es.close();
var pBar = document.getElementById('progressor');
pBar.value = pBar.max; //max out the progress bar
}
else {
var pBar = document.getElementById('progressor');
pBar.value = result.progress;
var perc = document.getElementById('percentage');
perc.innerHTML = result.progress + "%";
perc.style.width = (Math.floor(pBar.clientWidth * (result.progress/100)) + 15) + 'px';
}
});
es.addEventListener('error', function(e) {
addLog('Error occurred');
es.close();
});
}
function stopTask() {
es.close();
addLog('Interrupted');
}
function addLog(message) {
var r = document.getElementById('results');
r.innerHTML += message + '<br>';
r.scrollTop = r.scrollHeight;
};
</script>
然后创建以下页面。它调用了index.php
<?php
header('Content-Type: text/event-stream');
// recommended to prevent caching of event data.
header('Cache-Control: no-cache');
function send_message($id, $message, $progress) {
$d = array('message' => $message , 'progress' => $progress);
echo "id: $id" . PHP_EOL;
echo "data: " . json_encode($d) . PHP_EOL;
echo PHP_EOL;
ob_flush();
flush();
}
//LONG RUNNING TASK
for($i = 1; $i <= 10; $i++) {
send_message($i, 'on iteration ' . $i . ' of 10' , $i*10);
sleep(1);
}
send_message('CLOSE', 'Process complete');