일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 무선랜카드
- include
- Injection
- ajax
- XMLHTTP
- SQL Injection
- javascript
- DS718+
- PHP GCM
- form
- RTL88x2BU
- synology
- 따라다니는 배너
- FileSystemObject
- println
- Getrows
- 크로스 컴파일
- ASP
- replace
- utf-8
- AC1300
- 시놀로지
- disabled
- lsusb
- jQuery
- 커널
- submit
- readonly
- euc-kr
- jquery 레이어
- Today
- Total
아는 것이 좋은 것이다.
[AJAX] 실시간 더보기 more (php) 페이징 기능 본문
출처: http://www.9lessons.info/2009/12/twitter-style-load-more-results-with.html
데모있음
테이블 생성
CREATE TABLE messages(msg_id INT AUTO_INCREMENT PRIMARY KEY,
message TEXT
);
스크립트
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$('.more').live("click",function()
{
var ID = $(this).attr("id");
if(ID)
{
$("#more"+ID).html('<img src="moreajax.gif" />');
$.ajax({
type: "POST",
url: "ajax_more.php",
data: "lastmsg="+ ID,
cache: false,
success: function(html){
$("ol#updates").append(html);
$("#more"+ID).remove(); // removing old more button
}
});
}
else
{
$(".morebox").html('The End');// no results
}
return false;
});
});
</script>
<ol class="timeline" id="updates">
##loadmore.php
<?php
include('config.php');
$sql=mysql_query("select * from messages ORDER BY msg_id DESC LIMIT 9");
while($row=mysql_fetch_array($sql))
{
$msg_id=$row['msg_id'];
$message=$row['message'];
?>
<li>
<?php echo $message; ?>
</li>
<?php } ?>
</ol>
//More Button here $msg_id values is a last message id value.
<div id="more<?php echo $msg_id; ?>" class="morebox">
<a href="#" class="more" id="<?php echo $msg_id; ?>">more</a>
</div>
</div>
##ajax_more.php
<?php
include("config.php");
if(isSet($_POST['lastmsg']))
{
$lastmsg=$_POST['lastmsg'];
$lastmsg=mysql_real_escape_string($lastmsg);
$result=mysql_query("select * from messages where msg_id<'$lastmsg' order by msg_id desc limit 9");
while($row=mysql_fetch_array($result))
{
$msg_id=$row['msg_id'];
$message=$row['message'];
?>
<li>
<?php echo $message; ?>
</li>
<?php
}
?>
//More Button here $msg_id values is a last message id value.
<div id="more<?php echo $msg_id; ?>" class="morebox">
<a href="#" id="<?php echo $msg_id; ?>" class="more">more</a>
</div>
<?php
}
?>
##style.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;
-moz-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 }
'AJAX' 카테고리의 다른 글
[AJAX] jquery 실시간 중복체크 (0) | 2014.06.26 |
---|---|
[AJAX] 요청시 페이지 불러오기(아이디 중복체크) (0) | 2014.06.17 |
[AJAX] 실시간 더보기 more (asp) 페이징 기능 (0) | 2014.04.30 |