添加加载器加载表数据的jQuery或AJAX

Question

这里是我的问题的描述：

我有一个数据库连接的位置：

$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。我到现在为止尝试过很多教程，但没有成功。

Answer 1

这里是一个方案：

<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); 
    } 
});