Как на jquery сделать подгрузку новых строк в таблицу?

Пользователь

от francisco.friesen , в категории: JavaScript , год назад

Как на jquery сделать подгрузку новых строк в таблицу?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от carlo.cummerata , 9 месяцев назад

@francisco.friesen 

Вот пример, как можно реализовать подгрузку новых строк в таблицу с помощью jQuery:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
  
    
      ID
      Name
      Email
      City
    
  
  
    
      1
      John
      [email protected]
      New York
    
    
      2
      Jane
      [email protected]
      Los Angeles
    
    
      3
      Mike
      [email protected]
      Chicago
    
  


Load More


JavaScript код:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var page = 1; // начальная страница
var perPage = 5; // количество строк на одной странице

// функция для загрузки данных с сервера
function loadTableData(page, perPage) {
  $.ajax({
    url: "data.php",
    data: { page: page, perPage: perPage },
    dataType: "json",
    success: function(data) {
      var html = "";
      $.each(data, function(i, row) {
        html += "";
        html += "" + row.id + "";
        html += "" + row.name + "";
        html += "" + row.email + "";
        html += "" + row.city + "";
        html += "";
      });
      $("#table-body").append(html);
    }
  });
}

// загружаем первую страницу данных
loadTableData(page, perPage);

// обработчик клика на кнопку "Load More"
$("#load-more").on("click", function() {
  page++; // увеличиваем номер страницы
  loadTableData(page, perPage); // загружаем новые данные
});


В этом примере используется AJAX для загрузки данных с сервера. В функции loadTableData мы передаем номер страницы и количество строк на странице в качестве параметров, а затем используем их в запросе к серверу. После получения данных мы создаем HTML-код для новых строк таблицы и добавляем его в конец тела таблицы с помощью метода append. Обработчик клика на кнопку "Load More" просто увеличивает номер страницы и вызывает функцию loadTableData с новыми значениями параметров.