https://www.9lessons.info/2009/12/twitter-style-load-more-results-with.html#google_vignette
Twitter Style Load More Results with jQuery and Ajax.
Twitter and Facebook using very nice technique for loading more tweets and updates, when you click the more button old tweets display on the screen.
www.9lessons.info
다음 글을 참고하여 입맛에 맞게 코드를 수정했습니다.
저는 mysqli 로 db와 연결하였기 때문에 mysqli로 사용을 통일했습니다.
구현 방식은
1. 처음에 id 내림차순으로 9개의 메세지가 보입니다.
2. 더보기 버튼을 누르면, 가장 마지막 메세지의 id를 저장합니다.
3. 그보다 작은 id를 가진 데이터 중에서 다시 9개를 가져오는 형식입니다.
loadMore.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="loadMore.css" rel="stylesheet">
</head>
<body>
<div id='container'>
<ol class="timeline" id="updates">
<?php
// PHP 코드를 여기에 작성합니다.
//이렇게 하면 브라우저에 에러 메시지가 표시됩니다.
error_reporting(E_ALL);
ini_set('display_errors', 1);
include('config_mysqli.php');
$sql = mysqli_query($connect, "select * from forums ORDER BY forumId DESC LIMIT 9");
while($row=mysqli_fetch_array($sql))
{
$forumId=$row['forumId'];
$forumContents=$row['forumContents'];
?>
<li>
<?php echo $forumContents; ?>
</li>
<?php } ?>
</ol>
<!-- 가장 마지막에 출력된 forumId를 id값으로 가지고 있다. -->
<div id="more<?php echo $forumId; ?>" class="morebox">
<a href="#" class="more" id="<?php echo $forumId; ?>">more</a>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script type="text/javascript">
$(function()
{
$(document).on("click", '.more', function()
{
var ID = $(this).attr("id");
if(ID)
{
//"더 보기" 버튼의 내용을 로딩 이미지로 변경합니다.
$("#more"+ID).html('<img src="https://t1.daumcdn.net/cfile/tistory/99537A355AA267420B" />');
$.ajax({
type: "POST",
url: "ajax_more.php",
data: "lastmsg="+ ID,
cache: false,
success: function(html){
//ajax 요청이 성공했을때 받아온 html 데이터를 'ol#updates' 요소의 하위요소로 추가하는 역할을 합니다
// 결과적으로 사용자는 'more' 버튼을 클릭할때마다 새로운 포럼글이 페이지에 추가되게 됩니다.
$("ol#updates").append(html);
$("#more"+ID).remove(); //이전의 "더 보기" 버튼을 삭제합니다.
}
});
}
else
{
$(".morebox").html('The End');// 만약 더 이상 결과가 없다면 "The End" 메시지를 출력합니다.
}
return false;
});
});
</script>
</body>
</html>
ajax_more.php
<?php
include('config_mysqli.php');
if(isset($_POST['lastmsg']))
{
$lastmsg=$_POST['lastmsg'];
$result=mysqli_query($connect, "select * from forums where forumId < $lastmsg order by forumId desc limit 9");
//forums 테이블에서 forumId의 값이 $lastmsg보다 작은 것을 가져와 내림차순으로 정렬한 후에 상위 9개의 결과만을 가져오는 것이다.
//loadMore.html로 내보내는 html 데이터들
while($row=mysqli_fetch_array($result))
{
$forumId=$row['forumId'];
$forumContents=$row['forumContents'];
?>
<li>
<?php echo $forumContents; ?>
</li>
<?php
}
?>
<!-- 가장 마지막에 출력된 forumId를 id값으로 가지고 있다. -->
<div id="more<?php echo $forumId; ?>" class="morebox">
<a href="#" id="<?php echo $forumId; ?>" class="more">more</a>
</div>
<?php
}
?>loadMore.css
*{ margin:0px; padding:0px }
ol.timeline
{
list-style:none
}
ol.timeline li
{
position:relative;
border-bottom:1px #dedede dashed;
padding:8px;
}
.morebox
{
font-weight:bold;
color:#333333;
text-align:center;
border:solid 1px #333333;
padding:8px;
margin-top:8px;
margin-bottom:8px;
border-radius: 6px;
-webkit-border-radius: 6px;
}
.morebox a{ color:#333333; text-decoration:none}
.morebox a:hover{ color:#333333; text-decoration:none}
#container{margin-left:60px; width:580px }'php' 카테고리의 다른 글
| <php> Composer 설치시 오류 뜨는 문제 해결 (4) | 2024.04.23 |
|---|---|
| t2micro 인스턴스 사용시, 동영상 압축 시간 오래걸리는 문제 (2) | 2024.04.18 |
