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

Question

Here is the description of my issue:

I have a db connection here:

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

Here is my statement:

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

Here is my while loop:

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>';

I want to make a loader before this content table display because there are more than 50,000 products. Something kind of processing or a circle showing that a content is loading, just a simple one, maybe jQuery or ajax. I have tried many tutorials till now but no success.

davidkonrad · Accepted Answer · 2013-09-27 19:12:41Z

1

here is a scheme for that :

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

answered Sep 27, 2013 at 19:12

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DanielDake Over a year ago

Yep! That was the one bro :)

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related