添加一个加载器以加载带有数据 jQuery 或 ajax 的表


Adding a loader to load a table with data jQuery or ajax

这是我的问题的描述:

我这里有一个数据库连接:

$host = 'some host credentials';
$dbh = 'My database';

以下是我的声明:

$qry = "SELECT some_data FROM some_table LIMIT 1000";
$result = some code here;

这是我的while循环:

echo '<table class="table table-striped table-hover table-bordered" id="example">
<thead>
    <tr  class="test">
        <th style="border: 1px solid #333;">PRODUCTPRICE</th>
        <th>PRODUCTNAME</th>
        <th>PRODUCTCODE</th>
        <th>PRODUCTSALE</th>
        <th>PRODUCTPRICE</th>
    </tr>
</thead>
<tbody>';
while ($row = mysql_fetch_assoc($result)){
$PRODUCTID = intval($row["PRODUCTID"]);
$PRODUCTNAME = $row["PRODUCTNAME_1"];
$PRODUCTCODE = $row["PRODUCTCODE"];
$PRODUCTSALE = $row["PRODUCTSALE_"];
$PRODUCTPRICE = $row["PRODUCTPRICE"];

    echo '<tr class="odd gradeX">
        <td>'.$PRODUCTID.'</td>
        <td>'.$PRODUCTNAME.'</td>
        <td>'.$PRODUCTCODE.'</td>
        <td class="center">'.$PRODUCTSALE.'</td>
        <td class="center">'.$PRODUCTPRICE.'</td>
    </tr>';

}
echo '</tbody>
</table></div>
</div>
</body>
</html>';

我想在此内容表显示之前制作一个加载器,因为有超过 50,000 个产品。某种处理或显示内容正在加载的圆圈,只是一个简单的,可能是jQuery或ajax。到目前为止,我已经尝试了很多教程,但没有成功。

这里有一个方案:

<div id="content"></div>
$.ajax({
    url : 'the-above-script.php',
    beforeSend : function() {
        $("#content").html('<img src="ajax-icon-from-www.ajaxload.info">');
    },
    success : function(html) {
        $("#content").html(html);
    }
});