How to refresh table with jquery ajax?

Question

I have the below table. With ajax call I am updating the content of the table. It is reflected in the database, but how can I refresh the table without reloading the entire page. Please someone guide me.

My table structure:

<table class="table table-hover" id="cust-table">
    <thead>
        <tr>
            <th>LastName</th>
            <th>FirstName</th>
        </tr>
    </thead>
    <tbody>
        <?php
            for($i=0; $i<$numrows; ++$i) {
                 $contacts = mysqli_fetch_assoc($result);
            ?>
        <tr>
            <td><?php echo $contacts['LastName']; ?></td>
            <td><?php echo $contacts['FirstName']; ?></td>
        </tr>
        <?php
        } ?>
    </tbody>
</table>

Jquery code:

$.ajax({   
       type: 'POST',   
       url: 'update.php',   
       data: {LastName:last_name, FirstName:first_name}
     });

the update.php is updating the database but I need to refresh the table without refreshing the entire page. Can someone please help me on this?

I've voted to close this as too broad. You'd benefit from looking through jQuery's documentation (especially that of its AJAX method: api.jquery.com/jquery.ajax). — James Donnelly
– James Donnelly, Commented Dec 17, 2014 at 12:09

Dirk · Accepted Answer · 2014-12-17 12:34:05Z

2

This should be easy.

    //delete all rows in table
    $('#cust-table').empty();

    //add rows
    $('#cust-table > tbody:last').append('<tr> ... </tr>'); //do the magic

answered Dec 17, 2014 at 12:34

Dirk

414 bronze badges

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

Comments

vineet · Accepted Answer · 2014-12-17 13:09:03Z

2

For your scenario, write code for html table and ajax in other pages. For example:-

In update.php

//do stuff for update
//html table code
------------------------

In ajax page(test.php)

<div id='load'>

</div>

<script>
$(function(){
loadData();

// call by click event
$('#selector-name').click(function(){
     loadData();
});


function loadData(){
    $.ajax({   
     type: 'POST',   
     url: 'update.php',   
     data: {LastName:last_name, FirstName:first_name},
    success: function(msg) {
            $("#load").html(msg);
        },
    });
  }
});
</script>

edited Dec 17, 2014 at 13:09

answered Dec 17, 2014 at 12:19

vineet

14.3k11 gold badges61 silver badges76 bronze badges

2 Comments

user3652549 Over a year ago

Thanks for the reply. I tried what you suggested. The page is not refreshing now but the table disappears. It appears only when I reload the page again. How can I refresh the table alone. I am new to jquery.

vineet Over a year ago

put ajax code in function and call function when document is ready. check again post

Collectives™ on Stack Overflow

How to refresh table with jquery ajax?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related