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

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

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

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от carlo.cummerata , год назад

@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 с новыми значениями параметров.

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

от jerrold_langworth , 3 месяца назад

@francisco.friesen 

Не забудьте также создать серверную часть, которая будет обрабатывать ваш запрос и возвращать данные в формате JSON. В коде выше, url: "data.php" указывает на скрипт data.php, который должен содержать логику для загрузки данных.


Пример server-side кода на PHP (data.php):

 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);
?>


Этот код просто возвращает часть данных из массива $rows в зависимости от значения номера страницы и количества строк на странице. Не забудьте адаптировать этот код под вашу собственную логику и используемое хранилище данных.


Также убедитесь, что вы подключили jQuery библиотеку перед выполнением скрипта:

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


Надеюсь, это поможет вам реализовать подгрузку новых строк в таблицу с использованием jQuery. Если у вас возникнут дополнительные вопросы, не стесняйтесь спрашивать!