mysql PHP中加载更多结果中的序列号


serial number in Load More Results in mysql PHP

我正在使用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++; }?> 

希望您不是有意为每一行创建一个新表。