Question

如何使加载更多按钮工作以使LIMIT 0,5转换为LIMIT 0,10并在第三次单击时转换为LIMIT 0,15并最大转换为LIMIT 0,30

我使用以下PHP，MySQL从数据库中获取记录

$select_resdetails = mysql_query("SELECT *, ((ACOS( SIN( -27.486204 * PI( ) /180 ) * SIN( `store-latitude` * PI( ) /180 ) + COS( -27.486204 * PI( ) /180 ) * COS( `store-latitude` * PI( ) /180 ) * COS( (152.994962 - `store-longitude`) * PI( ) /180 ) ) *180 / PI( )) *60 * 1.1515) AS `distance` FROM ( SELECT max(if(`field_name`='store-name', `field_value`, null )) AS `store-name`,
 max(if(`field_name`='store-description', `field_value`, null )) AS `store-description`, max(if(`field_name`='store-longitude', `field_value`, null )) AS `store-longitude`, max(if(`field_name`='store-latitude', `field_value`, null )) AS `store-latitude` FROM `wp_cf7dbplugin_submits` WHERE `form_name` = 'Add Store' GROUP BY `submit_time`) A  ORDER BY `distance` LIMIT 0,5");
?>
<form class="ui-filterable">
      <input id="myFilter" data-type="search">
</form>
<ul data-inset="true" data-role="listview" data-filter="true" data-input="#myFilter" style="padding:0px;">
<?php 
while($fetch_resdetails = mysql_fetch_array($select_resdetails)) {
echo '<li>
        <h2>' . $fetch_resdetails['store-name'] . '</h2>
        <p>' . number_format(($fetch_resdetails['distance']), 2, '.', '') . ' KM <em>' . $fetch_resdetails['store-description'] . '</em></p>
        </a>
      </li>
';
}
?>
<input type="button" value="Load More" />
</ul>

Answer 1

将点击量保存在本地存储中

if(limit <= 30){
  limit = limit + 5;
  localStorage.setItem("limit", limit);
}

不要忘记初始变量并使默认值为5

通过ajax发送此变量

使用获取方法并发送参数

$.get( "example.php?limit="+localStorage.getItem("limit"), 
function() {
  alert( "success" );
})

在你的php文件中使用$ _GET [＆＃39; limit＆＃39;]来读取限制变量

Answer 2

我正在使用Yii框架来解决这个问题。

视图文件中的

：

<div id="own_video_list">
<a href="javascript: void(0)" class= "load" id="'.$videos_limit.'">View more</a>
</div>

这里$ videos_limit是第一个限制（比如5）。

在js：

$('#own_video_list .load').live('click', function() {
     var lastaction = $(this).attr("id");
     var type       = 'own_video_list';

     loadMoreVideos(type, lastaction);
     return false;

}）;

function loadMoreVideos(type, lastaction)
{
  if(lastaction)
  {
     $("#"+type+" a#"+lastaction).html('<img src = "/images/loading.gif" alt = "loading">  Loading...');
     $.ajax({
        type: "POST",
        url:  "/videos/home/loadmorevideoshome",
        data: "type="+ type + "&lastId=" +lastaction,
        success: function(html){
           $("#"+type+" a.load").parent().parent().remove();
           $("#"+type).append(html);
           $('body').animate({scrolltop: $('body')[0].scrollHeight});
        }
     });
  }
  else
  {
     $("#"+type+" .load").html("no more video");
  }

}

控制器中的

：

public function actionLoadmorevideoshome()
{
  $type      = $_REQUEST['type'];
  $lastId    = $_REQUEST['lastId'];
  $userId    = Yii::App()->user->getId();
  $videoHtml = '';

  $videos = VideoList::getMostRecentVideos(self::RECORD_PER_PAGE, $userId , $lastId, 1);

  if( is_array($videos) && (count($videos) > 0) )
  {
     $videoHtml  .= $this->renderPartial('_view', array(
                                         'videoList' => $videos, 'type' => $type, )
                                         , true, false);
     $lastId = $lastId + count($videos);

     $videoHtml .= '<div class="video_col_01">
                      <div style="margin-left: 20px;" class="search_btn">
                         <a href="javascript: void(0)" class= "load" id="'.$lastId.'">View more</a>

                      </div>
                   </div>';

   }
   else
   {
      $videoHtml .= '<div class="video_col_01"><font color="red">No More Video</font></div>';
   }

   echo $videoHtml;
   Yii::app()->end();
}

PHP中的AJAX更多按钮可以获取更多记录

2 个答案: