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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<?php
  
$page = $_GET['page'];
$perPage = $_GET['perPage'];

// Симуляция базы данных или другой логики для загрузки данных
$rows = array(
    array('id' => 4, 'name' => 'Alice', 'email' => '[email protected]', 'city' => 'London'),
    array('id' => 5, 'name' => 'Bob', 'email' => '[email protected]', 'city' => 'Paris'),
    array('id' => 6, 'name' => 'Charlie', 'email' => '[email protected]', 'city' => 'Berlin')
);

$offset = ($page - 1) * $perPage;
$data = array_slice($rows, $offset, $perPage);

echo json_encode($data);
?>

1

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>