如何重置ajax搜索中的值以分页结果

时间:2016-11-14 17:59:08

标签: javascript php jquery mysql ajax

我遇到了“加载更多按钮"”的问题。我每次进行新搜索时都会尝试显示第二页结果(以及其他结果),但我用来确定当前结果页面的值总是在增加......我需要重置它当用户进行新搜索时

这里是我使用

的代码

HTML:

<input type="text" id="input"/>
<button id="search"> Search </button>
<div id="result"> </div>

js发送表格:

    <script type="text/javascript">
    $('#search').on('click', function(){
    var page_search = 1; 
    var search= $('#input').val();
    showSearch(page_search);
   });

          $("#load-more").click(function () {
            page_search++; 
            showSearch(page_search); 
          }); 

          function showSearch(page_search){
            $.post( 'search.php', {'page_search': page_search, 'search': search}, function(data){
              if(data.trim().length == 0){
                $("#result").show().html("no more results found");
              }else if(page_search=1){
              $("#result").html(data); 
              }else{
              $("#result").append(data); 
              }
            });
          }
    </script>

php文件:正在重新输入输入文本值和当前页面以生成限制以显示结果,如:

$item_per_page = 5;
$position = (($page-1) * $item_per_page);
$search= $_POST['search'];
$page=$_POST["page_search"];

$query=("SELECT columns from table oder by blabla DESC LIMIT $position, $item_per_page");

问题出在page_search ++上,我每次进行新的搜索时如何重置该变量,否则只是增加和增加,永远不会开始它应该是什么,只是在第一次搜索时却没用了

1 个答案:

答案 0 :(得分:1)

您可以使用PHP计数器而不是JavaScript计数器。将两个代码复制粘贴到两个具有给定名称的文件中,即打开&#34; ajax1.php&#34;在浏览器中看到它正在运行:

<强> ajax1.php

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type = "text/javascript">
function my_button ()
{ $.ajax( { url     : "ajax2.php",
            success : function ( data )
            { document.getElementById("result").innerHTML = data; }, // ◄■■ GET DATA
            error   : function ( xhr )
            { alert( "error" ); }
        } );
}
    </script>
  </head>
  <body onload="my_button()">
    <button onclick="my_button()">Load more</button> <!-- ◄■■ LOAD BUTTON -->
    <div id="result"> <!-- ◄■■ DIV TO DISPLAY DATA -->
    </div>
  </body>
</html>

<强> ajax2.php

<?php
session_start();
if ( ! isset( $_SESSION["page_search"] ) ) // ◄■■  FOR THE FIRST PAGE.
   $_SESSION["page_search"] = 0; // ◄■■ CREATE COUNTER.
$database = array( 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,32,33,34,35,36,37 );
echo implode( ",",array_slice( $database,$_SESSION["page_search"],5 ) );
$_SESSION["page_search"] += 5; // ◄■■  INCREASE COUNTER.
if ( $_SESSION["page_search"] > count( $database ) ) // ◄■■ FOR THE LAST PAGE.
   unset( $_SESSION["page_search"] ); // ◄■■ DESTROY COUNTER.
?>

我使用数组来表示数据库数据,使用array_slice来表示您的select ... limit ...

每次计数器到达终点时重新开始。