dongmanzui8486 2016-11-14 17:59
浏览 42

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

I'm having problems with a "load more button". I try to show the second page of results (and the others ahead) every time I make a new search, but the value I use to determine which is the current page of results, is always increasing... And I need to reset it when user makes a new search

here's the code I'm using

html:

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

js to send form:

    <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 file: is reciving the input text value and the current page to generate a limit to show the results, something like:

$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");

The problem is with page_search++ and how can I reset that variable each time I make a new search, otherwise is just increasing and increasing and never start how it should be, just at the first search but then is useless

  • 写回答

1条回答 默认 最新

  • doujiang1939 2016-11-14 18:53
    关注

    You can use a PHP counter instead of a JavaScript counter. Copy-paste next two codes in two files with the given names, the open "ajax1.php" in your browser to see it running :

    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.
?>

    I use an array to represent the database data, and array_slice to represent your select ... limit ....

    Everytime the counter reaches the end it re-starts.

    评论

报告相同问题？

悬赏问题

  • ¥15 keil的map文件中Image component sizes各项意思
  • ¥30 BC260Y用MQTT向阿里云发布主题消息一直错误
  • ¥20 求个正点原子stm32f407开发版的贪吃蛇游戏
  • ¥15 划分vlan后，链路不通了？
  • ¥20 求各位懂行的人，注册表能不能看到usb使用得具体信息，干了什么，传输了什么数据
  • ¥15 Vue3 大型图片数据拖动排序
  • ¥15 Centos / PETGEM
  • ¥15 划分vlan后不通了
  • ¥20 用雷电模拟器安装百达屋apk一直闪退
  • ¥15 算能科技20240506咨询（拒绝大模型回答）