Здравствуйте, знатоки помогите c такой задачей.
Есть таблица с 10 пользователями. По клику по кнопке навигации 1-2-3 и.т.д ajax отправляет id кнопки и сервер отдает в формате json данные страницы(page=id) 10 новых пользователей и их данные, которые и нужно поместить в таблицу.
Таблица
<table>
<thead>
<tr>
<td>ID</td>
<td>Контакты</td>
<td>Логин</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="100%"> Навигация по страницам:
<a href="#" class="loadpeople" data-id="1">1</a>
<a href="#" class="loadpeople" data-id="2">2</a>
<a href="#" class="loadpeople" data-id="3">3</a>
</td>
</tr>
</tfoot>
<tbody id="peoplelist">
<tr>
<td>33</td>
<td>234243@mail.ru</td>
<td>werwerwer</td>
</tr>
<tr>
....
</tr>
</tbody>
</table>
JSON ответ
{
"page=1":[ {
"id": "123",
"login": "wsdf1001",
"mail": "werty123@m11ail.ru"
},
{
"id": "124",
"login": "werty33333",
"mail": "werty13333@123mail.ru"
}
],
"page=2":[ {
"id": "2123",
"login": "wsdf1001",
"mail": "werdfs23@m11ail.ru"
},
{
"id": "2124",
"login": "wsdfty33333",
"mail": "wsdfy13333@123mail.ru"
}
]
}
AJAX
$('.loadpeople').click(function(){
var id=$(this).data('id');
$.ajax({
type: "POST",
url: "",
dataType: "json",
data: "page="+ id,
success: function(data, textStatus, xhr){$("#peoplelist").html("<tr><td>"+data.id+"</td><td>"+data.login+"</td><td>"+data.mail+"</td></td></tr>");}
});
return false;
});
Как правильно написать ajax запрос, чтобы в таблицу добавлялось столько строк сколько вернет сервер. Заранее спасибо за ответ.