在AJAX中将JSON数据添加到表中

Question

Ok i have some search results from input box. I used keyup to get results. Then tis results send to AJAX, and i want to append it to table. My problem is because i use append i will get more than one table headers if i have more results, on the other side i cant use html() because script use for loop so i will only get one result. Can someone help me to solve this problem. I try something like this...

$("#search").keyup(function () 
    {
       var value = $(this).val(); // varijabla iz input polja
       // provera za minimalnu duzinu pretrage
       if(value.length > 3)
       {
            $.ajax({
                type: "POST",
                url: "crud/searching/",
                data: { 'var' : value },
                dataType: "json",
                success: function(response)
                {    alert(response);  
                    $('#warning').html(response.msg);;
                    $('#result').html('');

                    for(var i=0; i<response.result.length; i++)  //petlja za pristup json
                    {
                        $('#result').append('<table class="page-list"><thead><tr><th>#</th><th>Naslov</th><th>Autor</th><th>Cena</th><th>Valuta</th></tr><thead><tbody><tr><td>'+ response.result[i].id +'</td><td>'+ response.result[i].naslov +'</td><td>'+ response.result[i].autor +'</td><td>'+ response.result[i].cena +'</td><td>'+ response.result[i].valuta +'</td></tr> </tbody></table> ' );//dodavanje rezultata u div

                    }                                                     
                } 
            })
        }
    });

Answer 1

Just create the table once and then append trs in the loop to its tbody

$('#warning').html(response.msg);
if (response.result.length) {
    var $table = $('<table class="page-list"><thead><tr><th>#</th><th>Naslov</th><th>Autor</th><th>Cena</th><th>Valuta</th></tr><thead><tbody></tbody></table>').appendTo($('#result').html(''));
    var $tbody = $table.find('tbody');

    for (var i = 0; i < response.result.length; i++) //petlja za pristup json
    {
        $tbody.append('<tr><td>' + response.result[i].id + '</td><td>' + response.result[i].naslov + '</td><td>' + response.result[i].autor + '</td><td>' + response.result[i].cena + '</td><td>' + response.result[i].valuta + '</td></tr>  '); //dodavanje rezultata u div
    }
} else {
    $('#result').html('')
}