jQuery заменяет строки таблицы новыми данными

Question

Я пытаюсь заменить таблицу новыми данными, полученными через ajax. Первый раз работает просто отлично, но затем строки заменяются, а не заменяются, поэтому я получаю дубликаты строк.

Вот мой код:

            success: function(data){            
            $("#featured_listing_tbody").children( 'tr:not(:first)' ).remove();
            counter= 1;
            $.each(data, function(i, val){  
                        newPropertyRows += '<tr>';
                                $.each(val, function(key, info){
                                    var skip = false;
                                        if(key == "Id") {                                           
                                                Id =  info;
                                                newPropertyRows += '';
                                                skip = true;
                                        }
                                        if(key == "thumbs"){
                                                info = '<img width="100px" src=uploads/properties/'+Id+'/thumbs/'+info+' />';
                                                newPropertyRows += '<td class="col'+counter+'"><a href="/featured.php?prop='+Id+'">'+info+'</a></td>';  
                                                skip = true;
                                                counter++;      
                                        }
                                        if(skip == false){
                                                newPropertyRows += '<td class="col'+counter+'"><a href="/featured.php?prop='+Id+'">'+info+'</a></td>';                      
                                                counter++;      
                                        }

                                        info = '';
                                });                     
                        newPropertyRows += '</tr>';                         
            });                     
                $("#featured_listing_tbody").html(newPropertyRows);
        }

Answer 1

У меня есть предложение, вместо того, чтобы возвращать объект данных и преобразовывать его в HTML в javascript, просто возвращать данные в виде требуемых строк таблицы.Поскольку вы уже генерируете их для страницы, у вас должна быть логика / шаблон, чтобы сделать это снова легко.

Чтобы заменить данные, я бы просто включил тег <tbody> вокруг ваших строк данных и в вашемФункция успеха ajax просто заменяет ее содержимое - вместо сложного селектора опускается первая строка таблицы, которая, как я полагаю, является заголовками столбцов.

$("#featured_listing tbody").html(data); //Replace contents of <tbody> tag

И таблица:

<table>
    <thead><tr>....row headers...</tr></thead>
    <tbody>...data rows...</tbody>
</table>

Answer 2

Возможно, проблема не в той части кода, которую вы разместили.Например, в текущем коде вы всегда используете операцию += с переменной newPropertyRows. Вы сбрасываете ее в пустую строку перед каждым вызовом ajax?

Кстати, мне кажется, что вы не вызываете $("#featured_listing_tbody").children( 'tr:not(:first)' ).remove() в начале обработчика success, потому чтоиспользуйте $("#featured_listing_tbody").html(newPropertyRows); позже, что перезапишет все тело таблицы.

Answer 3

Не совсем уверен, сохраните ли вы запись для таблицы или в режиме реального времени и нигде не хранится.

Но если она сохранена, вы можете попробовать сгенерировать html для всей таблицы или только строк вна стороне сервера, а затем просто замените содержимое контейнера / таблицы данными, полученными с сервера.