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