我正在使用LOAD MORE按钮显示mysql数据库的结果
每次点击"加载更多结果"按钮显示/添加5个结果
但序列号并没有相应增加。每次点击后,每个结果显示的序列号为1到5。。。
例如,点击3次后显示的结果是1,2,3,4,51,2,3,4.51,2,3,4,4,5,应该是1,2,3,3,4,5,6,7,8,9,10,11,12,13,14,15,依此类推…
使用的代码如下-
在index.php上
include("config.inc.php");
$from_date = "2013-06-01";
$to_date = "2014-06-01";
$results5 = mysqli_query($connecDB,"SELECT COUNT(*) FROM tablename WHERE lecture_start BETWEEN '" . $from_date . "' AND '" . $to_date . "'");
$get_total_rows = mysqli_fetch_array($results5); //total records
//break total records into pages
$total_pages = ceil($get_total_rows[0]/$item_per_page);
头部:-
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var track_click = 0; //track user click on "load more" button, righ now it is 0 click
var total_pages = <?php echo $total_pages; ?>;
$('#results').load("fetch_pages.php", {'page':track_click}, function() {track_click++;}); //initial data to load
$(".load_more").click(function (e) { //user clicks on button
$(this).hide(); //hide load more button on click
$('.animation_image').show(); //show loading image
if(track_click <= total_pages) //make sure user clicks are still less than total pages
{
//post page number and load returned data into result element
$.post('fetch_pages.php',{'page': track_click}, function(data) {
$(".load_more").show(); //bring back load more button
$("#results").append(data); //append data received from server
//scroll page to button element
$("html, body").animate({scrollTop: $("#load_more_button").offset().top}, 500);
//hide loading image
$('.animation_image').hide(); //hide loading image once data is received
track_click++; //user click increment on load button
}).fail(function(xhr, ajaxOptions, thrownError) {
alert(thrownError); //alert any HTTP error
$(".load_more").show(); //bring back load more button
$('.animation_image').hide(); //hide loading image once data is received
});
if(track_click >= total_pages-1)
{
//reached end of the page yet? disable load button
$(".load_more").attr("disabled", "disabled");
}
}
});
});
</script>
在正文部分:-
<div align="center" id="results"></div><br><br>
<div align="center">
<button class="load_more" id="load_more_button" >Load More Results</button>
<div class="animation_image" style="display:none;"><img src="ajax-loader.gif"> <font style="font-size:16px; font-weight:bold; color:#d44302;">Loading...</font></div>
</div>
fetch_pages.php的代码如下
<?php
include("config.inc.php"); //include config file
//sanitize post value
$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
//throw HTTP error if page number is not valid
if(!is_numeric($page_number)){
header('HTTP/1.1 500 Invalid page number!');
exit();
}
//get current starting point of records
$position = ($page_number * $item_per_page);
$from_date = "2013-06-01";
$to_date = "2014-06-01";
//Limit our results within a specified range.
$results5 = mysqli_query($connecDB,"SELECT * FROM tablename WHERE lecture_start BETWEEN '" . $from_date . "' AND '" . $to_date . "' order by lecture_start LIMIT $position, $item_per_page");
$counts = 1;
//output results from database
while($data = mysqli_fetch_array($results5))
{ ?>
<table width="98%" border="0" cellpadding="4" cellspacing="4">
<tr>
<td ><? echo counts;?>
<td width="12%" style="background-color:#3f6b03; color:#f4f4af; border:1px outset #f4f4af; border-radius:5px; padding:3px; text-align:center;"><?=date("d M Y",strtotime($data["lecture_start"]));?> </td>
<td width="58%" style="background-color:#d44302; color:#f4f4af; border:1px outset #f4f4af; border-radius:5px; padding:3px; font-weight:bold;"><?=stripslashes($data["lecture_subject"])?></td>
<td width="20%" style="background-color:#3f6b03; color:#f4f4af; border:1px outset #f4f4af; border-radius:5px; padding:3px;"><?=$data["lecturer_name"]?></td>
<td width="5%" style="background-color:#d44302; color:#f4f4af; border:1px outset #f4f4af; border-radius:5px; padding:3px;"><a class="fancybox fancybox.iframe more_info_btn" href="<?=$data['photo']?>" class="rec" style="font-weight:bold; color:#3f6b03; cursor:pointer;"><button style="color:#3f6b03; cursor:pointer; font-weight:bold;">View Photo</button></a></td>
<td width="5%" style="background-color:#3f6b03; color:#f4f4af; border:1px outset #f4f4af; border-radius:5px; padding:3px;"><a class="fancybox fancybox.iframe more_info_btn" href="<?=$data['recording_link']?>" class="rec" style="font-weight:bold; color:#3f6b03; cursor:pointer;"><button style="color:#d44302; cursor:pointer; font-weight:bold;">Play Now</button></a></td>
</tr>
</table>
<? counts++; }?>
这里$count用于序列号。
此$计数显示前5个结果的序列号1到5,并再次显示下一个加载结果的1到5而不是6到10。
你需要帮助。。。
我认为最好将html更改为
<div align="center"></div>
<table id="results">
</table>
<div align="center">
<button class="load_more" id="load_more_button" >Load More Results</button>
<div class="animation_image" style="display:none;"><img src="ajax-loader.gif"> <font style="font-size:16px; font-weight:bold; color:#d44302;">Loading...</font></div>
</div>
您不需要在ajax调用中每次都返回table标记您的fetch_pages.php将是这样的:
<?php
include("config.inc.php"); //include config file
//sanitize post value
$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
//throw HTTP error if page number is not valid
if(!is_numeric($page_number)){
header('HTTP/1.1 500 Invalid page number!');
exit();
}
//get current starting point of records
$position = ($page_number * $item_per_page);
$from_date = "2013-06-01";
$to_date = "2014-06-01";
//Limit our results within a specified range.
$results5 = mysqli_query($connecDB,"SELECT * FROM tablename WHERE lecture_start BETWEEN '" . $from_date . "' AND '" . $to_date . "' order by lecture_start LIMIT $position, $item_per_page");
$counts = $page_number*$item_per_page + 1;
//output results from database
while($data = mysqli_fetch_array($results5))
{ ?>
<tr>
<td ><? echo counts;?>
<td width="12%" style="background-color:#3f6b03; color:#f4f4af; border:1px outset #f4f4af; border-radius:5px; padding:3px; text-align:center;"><?=date("d M Y",strtotime($data["lecture_start"]));?> </td>
<td width="58%" style="background-color:#d44302; color:#f4f4af; border:1px outset #f4f4af; border-radius:5px; padding:3px; font-weight:bold;"><?=stripslashes($data["lecture_subject"])?></td>
<td width="20%" style="background-color:#3f6b03; color:#f4f4af; border:1px outset #f4f4af; border-radius:5px; padding:3px;"><?=$data["lecturer_name"]?></td>
<td width="5%" style="background-color:#d44302; color:#f4f4af; border:1px outset #f4f4af; border-radius:5px; padding:3px;"><a class="fancybox fancybox.iframe more_info_btn" href="<?=$data['photo']?>" class="rec" style="font-weight:bold; color:#3f6b03; cursor:pointer;"><button style="color:#3f6b03; cursor:pointer; font-weight:bold;">View Photo</button></a></td>
<td width="5%" style="background-color:#3f6b03; color:#f4f4af; border:1px outset #f4f4af; border-radius:5px; padding:3px;"><a class="fancybox fancybox.iframe more_info_btn" href="<?=$data['recording_link']?>" class="rec" style="font-weight:bold; color:#3f6b03; cursor:pointer;"><button style="color:#d44302; cursor:pointer; font-weight:bold;">Play Now</button></a></td>
</tr>
<? counts++; }?>
希望您不是有意为每一行创建一个新表。