添加加載器加載表數據的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); 
    } 
});