Smooth обновление/отображения обновленных данных таблицы

Question

Я использую эту функцию для заполнения таблицы со значениями из моей базы данных

И у меня есть фильтр, так что можно найти

Но когда я обновляю свою таблицу, удалите старый html и вставьте новый, на странице очень коротко ничего нет, поэтому он пуст, и он выглядит уродливым, если я набираю длинное предложение, например «bobby»

Это 5 функций keyup и 5 обновлений , Надеюсь, вы понимаете, о чем я говорю, я хочу, чтобы он выглядел гладко

function getData(filter) { 
$.ajax({ 
    url: '/Person/GetData', 
    type: 'GET', 
    data: { Filter: filter }, 
    success: function (data) { 

     // Template for HTML 
     var template = ''; 

     // Loop through the data 
     $.each(data, function (index, value) { 

      // Values from the database 
      var personId = value['Id']; 
      var firstName = value['FirstName']; 
      var lastName = value['LastName']; 
      var age = value['Age']; 

      // Template for a new <tr> 
      template += '<tr id="' + personId + '">' + 
          '<td col-lg-4">' + firstName + '</td>' + 
          '<td col-lg-4">' + lastName + '</td>' + 
          '<td col-lg-2">' + age + '</td>' + 
          '<td><a class="del-link col-lg-2">Slett</a></td>' + 
         '</tr>'; 

     }); 

     // Add the template to the table body 
     $('tbody').html(template); 
    } 
}); 

}

Answer 1

два отдельных вопроса здесь:

Но когда я обновить таблицу, удалить старую HTML и вставить новый один, страница очень кратко, не имеют ничего, так это пустой, и это выглядит некрасиво, если я печатаю длинную фразу, как «бобби»

Вы всегда должны ожидать AJAX запросов (особенно те, которые впоследствии вставки контента) занимают больше времени, чем ожидалось. Вы должны использовать какой-то анимационный график, чтобы показать, что контент загружается динамически. Существует много способов сделать это (поиск «анимации загрузчика AJAX» на StackOverflow).

Ваши обратные наблюдения не помогают вам ... по существу каждый последующий поиск очищает содержимое страницы, выполняет итерацию данных, а затем вставляет их в DOM. Выполнение этого несколько раз (как вы сказали) не только не нужно, но и накладывает нагрузку на ваш сервер и браузер клиента.

Это 5 функций KeyUp и 5 тонизирует, я надеюсь, вы понимаете, что я утра на поводу, я хочу, так это выглядит гладкой

Вы должны использовать метод SetTimeout таким образом, чтобы поиск не выполняются на каждой клавиатуре (когда keyup's являются последовательными). Это просто понять. Это по сути «таймер», который вы начинаете всякий раз, когда происходит ваше событие (keyup). Если пользователь запускает событие keyup во время работы таймера, запустите/сбросьте таймер. По истечении времени таймера выполните вызов AJAX.

например. используя кодирование SUDO, вот как я бы подойти к этому (пытаясь сохранить его простым)

• OnKeyUp событие
• ясно все ранее установленные SetTimeout()
• начать новую SetTimeout() (вызов функции после того, как таймер заканчивается)
• ---
• когда setTimeout() выполняет функцию ...
• шоу анимация
• выполнять AJAX вызов,
контента
• сборки с использованием данных
• вставки в DOM на успех или вставить сообщение об ошибке при сбое
• скрыть анимацию (как на успех или неудачу)