Можно ли в Jquery изменять таблицу реактивно?

Ребят подскажите пож-та.
Получаю данные с сервера. Могу ли я эти данные загружать в html-таблицу реактивно?
Сейчас все работает, но наблюдается какой то неприятный визуальный эффект при обновлении таблицы.
Код примерно такой.
$( "#polePoiska" ).on('keyup input', function() {
        var value = this.value;
        if (value.length > 3) {
            $.get( "/search?q="+value, function(data) {
                document.getElementById('searchResult').style.display = 'block'
                $.each(data, function (data_key, data_val) {
                    $("#tablePoisk tr").remove();
                    $("table.tableSearch").append("<tr><td>" + data_val.title + "</td><td>" + data_val.pharmacy__title + "</td><td>" + data_val.balance + "</td><td>" + data_val.price + "</td><td>");
                });
            });
        } else {
            document.getElementById('searchResult').style.display = 'none'
        }
        
    });
  • Вопрос задан
  • 85 просмотров
Пригласить эксперта
Ответы на вопрос 2
Stalker_RED
@Stalker_RED
попробуйте не удалять строку, а заменять.
Или даже менять данные в ячейках, не изменяя разметку.
Ответ написан
mgis
@mgis Автор вопроса
В итоге сделал при помощи vue
<script type="text/javascript">

        var app = new Vue({
        delimiters: ['[[', ']]'],
        el: '#main',
        data () {
            return {
            medicines: [],
            searchText: ''
            }
        },
        methods: {
            searchEvent ({ type, target }) {
            if (target.value.length > 3) {
                document.getElementById('searchResult').style.display = 'block  '
                var textStr = target.value
                axios.get("/search?q=" + textStr.toUpperCase())
                .then(response => {
                    this.medicines = response.data
                })
                .catch(e => {
                    this.errors.push(e)
                })
            } else {
                document.getElementById('searchResult').style.display = 'none'
            }
            }
        }
    })
        
    </script>


Предварительно конечно его подключив
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
28 нояб. 2024, в 05:21
2000 руб./за проект
28 нояб. 2024, в 05:18
500 руб./за проект
28 нояб. 2024, в 03:51
3500 руб./за проект