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

时间：2014-09-17 08:19:23

标签： php mysql

我正在使用LOAD MORE按钮显示来自mysql数据库的结果

每次点击显示/添加5个结果＆＃34;加载更多结果＆＃34;按钮

但序列号没有相应增加。每次点击后，每个结果显示的序列号为1到5 ......

e.g。 3次点击后显示的结果是1,2,3,4,5 1,2,3,4,5 1,2,3,4,5应该是1,2,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++; }?>

这里$ counts用于序列号。

此$ count显示前5个结果的序列号1到5，并且再次显示1到5表示下一个加载结果而不是6到10。

需要你的帮助......

1 个答案:

答案 0 :(得分：0)

我认为将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调用中都不需要返回表标记 你的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++; }?>

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

相关问题
最新问题