@Lobanov

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

Ребят, привет!
Опишу проблему сначала.
У меня есть на странице вот такой код:
<table class="last_payment">
						<thead>
							<tr>
								<th>
									Время
								</th>
								<th>
									Сумма
								</th>
								<th>
									Кто оказал помощь
								</th>
							</tr>
						</thead>
						<tbody>

						<?php

							if ($last_output_payments != FALSE)
							{	//если нам вернулись данные, т.е. не равно FALSE. запускаем цикл и строим таблицу
								foreach ($last_output_payments as $value) { ?>

								<tr class="data_payments">
									<td>
										<?php echo date('H:i', $value['date_payment']); ?>
									</td>
									<td>
										<?php echo $value['summa']; ?> <i class="fa fa-rub"></i>
									</td>
									<td>
										<?php echo $value['kto_okazal_pomosh_name'] . " " . $value['kto_okazal_pomosh_last_name']; ?>
									</td>
								</tr>

							<?php } //скобка от цикла foreach ?>

						</tbody>
					</table>

					<!--Блок пагинации -->
					<div class="pagination">
						Сколько отображать элементов: <select name="count_last_payments_per_page" id="count_last_payments_per_page" onchange="add_new_payments()">
							<option value="5">5</option>
							<option value="10">10</option>
							<option value="30">30</option>
							<option value="50">50</option>
							<option value="100">100</option>
						</select>
					</div>

					<?php } //Скобка от условия if


дергаем вот эту функцию, но она у меня пустая, просто дальше не знаю куда двигаться
function add_new_payments()
{	
	//Получаем данные из выбранного селекта
	var count_per_page = $('#count_last_payments_per_page').val();
	alert(count_per_page);

}

//функция используется в ajax запросе в add_new_payments()
function add_new_elements(data)
{

}


На странице грузятся 5 элементов в таблицу. Мне необходимо при изменении селекта, т.е. человек выбирает например отобразить 10 элементов, отрисовать заново таблицу, без перезагрузки. Я чет туплю, пойдет вариант на jQuery, т.к. с Angular еще не работал. Подскажите пожалуйста как это реализовать, чет мыслей в голове нет, застопорился, хотя задача то не тривиальная. Буду благодарен за помощь! В гугле пытался искать, чет попадаются только связанные списки.

UPD Всех благодарю за помощь! :) Со всеми вопросами я справился!!! :)
Научился заполнять таблицу с помощью Ajax! :)
Вот такой функцией я перебираю массив и вставляю данные в таблицу:
function add_new_elements(data)
{
	$( ".data_payments" ).remove();//удаляем строки в таблице с классом data_payments
    $.each(data, function(key, val)
    {	//запускаем цикл и перебираем его
      	output = "<tr class='data_payments'>";
		output += "<td>";
		output += val.date_payment;
		output += "</td>";
		output += "<td>";
		output += val.summa;
		output += "</td>";
		output += "<td>";
		output += val.kto_okazal_pomosh_name;
		output += " ";
		output += val.kto_okazal_pomosh_last_name;
		output += "</td>";
		output += "</tr>";

		$( "#insert_count_per_page_last_payments" ).append(output);
    });
}

Все теперь работает как часы! :) Методом тыка все же допер! :) Я слаб просто в jQuery и JS :( Но спасибо Андрею большое за ответы и наводки в какую сторону смотреть! :)
  • Вопрос задан
  • 4003 просмотра
Пригласить эксперта
Ответы на вопрос 1
Andrbez
@Andrbez
Procrastination
1. При помощи Ajax отправить запрос серверу.
api.jquery.com/jquery.ajax

2. На стороне сервера сформировать список и отправить клиенту.

3. После получения ответа на стороне клиента удалить имеющиеся элементы (все кроме первого, который содержит заголовок таблицы).
api.jquery.com/remove

4. Заполнить таблицу новыми строками.
api.jquery.com/append
api.jquery.com/add
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы