Как добавить кнопку «показать ещё»?

Question

[Neuro]

У меня есть массив с данными и он рендерится на странцие через метод for вот пример кода

<% for(var i=0; i < reviews.length; i++) {%>
    		<div class="review-container">
    			<div class="account-icon-wrap">
    				<i class="material-icons account-icon">account_circle</i>
    			</div>
    			<div class="review-info">
    				<div class="name">
    					<%= reviews[i].name %>
    				</div>
    				<div class="rating">
    					<div class="stars-outer"></div>
    				</div>
    			</div>
    		</div> <% } %>

необходимо, что бы рендерились только первые 3 комментария, а остальные былы скрыты и открывались только при клике на кнопку "показать ещё", как можно это грамотно реализовать?
думал просто первые 3 рендерить, а остальные загонять в див с кнопкой и при помощи jquery делать show при клике, но так и не понял как это грамотно реализовать, может тут кто то сталкивался с таким?

Comments

[Сергей Сергей]

рендерить все, а через стили ограничиться отображением только трёх первых. по кнопке показывать скрытые.

[Neuro]

Сергей Сергей, ну я так и думал, просто не понял как добавить следующие комментарии после отрендеренных в отдельный блок

[Сергей Сергей]

ненене, все комментарии в одном блоке.

но если уж очень хочется выделять их в отдельный блок, то будет два цикла: первый от 1 до 3 прокрутит, второй от 4 и до конца массива. В первом цикле нужна проверка на пустое значение, а второй и запускаться не станет, если в массиве меньше четырёх значений.

Answer 1

[Валентин]

Ну не нужно подгружать все комментарии сразу, зачем?
А если их в сумме будет несколько тысяч?

При загрузке страницы берешь последние три записи из БД, а на кнопку "показать еще" вешай onclick и через Ajax отправляешь запрос на последующие записи и через .append() добавляешь их к уже существующим

/* start */
SELECT comment FROM baza ORDER BY id DESC limit 0, 3
/* 1 click show more */
SELECT comment FROM baza ORDER BY id DESC limit 3, 3
/* 2 click show more */
SELECT comment FROM baza ORDER BY id DESC limit 6, 3