Как на 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

 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); // загружаем новые данные
});