Having issue showing data to html table using ajax and php

Question

My problem is when i click the button to show the data from database to html table it shows up but when i try to click the button again it duplicates the content of the table and it continues to duplicate as long as i click the button.

script:

$('#showData').click(function() {

    $.ajax({
        url: 'Oppa/view/file.php',
        type: 'post',
        data: {tag: 'getData', code: $('#emailCodeResult').val()},
        dataType: 'json',
        success: function(data) {
            if (data.success) {
                $.each(data, function(index, record) {
                    if ($.isNumeric(index)) {
                        var row = $("<tr />");
                        row.appendTo("#myTable2 tbody");
                    }
                })
            }
            $('#myTable2').dataTable({
                "bjQueryUI": true,
                "bFilter": false,
                "bRetrieve": true,
                "sPaginationType": "full_numbers",
                "bAutoWidth": true,
                "bPaginate": false,
                "bInfo": false,
                "bLengthChange": false
            });
        }
    });
});

Remove the rows at each update, otherwise you keep appending — user1094553
– user1094553, Commented Jul 31, 2014 at 13:48
you should check this stackoverflow.com/questions/13670579/… — Pierre
– Pierre, Commented Jul 31, 2014 at 13:51

PeterKA · Accepted Answer · 2014-07-31 13:56:06Z

3

Use $("#myTable2 tbody").empty() to remove the rows before appending:

success: function(data){
        if(data.success){
            $("#myTable2 tbody").empty(); //<------------------------------------
            $.each(data, function(index, record){

answered Jul 31, 2014 at 13:56

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

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

Comments

supergicko · Accepted Answer · 2023-05-17 09:25:07Z

0

Try $('#myTable2 tbody').empty(); before fetching your JSON Array. This will remove existing rows of your Table before adding new ones. The Table Header will remain though.

EDIT:

Changed from .remove() to .empty() based on comment below

edited May 17, 2023 at 9:25

answered Jul 31, 2014 at 13:51

supergicko

615 bronze badges

2 Comments

h3li0s Over a year ago

$('#myTable2 tbody').empty();

h3li0s Over a year ago

Only difference is that $('#myTable2 tbody').remove(); removes the tbody tag as well :)

Collectives™ on Stack Overflow

Having issue showing data to html table using ajax and php

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related