通过服务器端数据（Ajax）进行客户端分页

Question

我有 3 个文件 index.php、.js 文件和 a.php 文件。我通过 js(jquery) 文件向 a.php 发出了 ajax 请求。我在 html 中得到响应，（在 1 个 html 响应中）有 r 3 个 div，但我想一次显示一个 div。然后单击 next 按钮 next div，它在同一个 html 响应中。它基本上是通过服务器端数据进行的客户端分页（从 1 个 AJAX 获取）。但我无法一一处理索引页中的 3 个 div。

1。 请求去 -

<script>
$(document).ready(function(){
 showitem(id);
}); 
</script>

1. 处理简单查询。

   函数显示项（id）{

   $.ajax({    
       type    : "POST",
       cache   : true,
       //dataType: "json",
       url     : "a.php",
       data    : {
                   proid:id
                 },                
       success: function(data) {
   
           $("#match_item_display").html(data);// This is span in index.php
   
       }
   });
   

   }

3。 在响应中（比如说）我以 HTML Divs 的形式获得 9 个元素（在这种情况下为 3 个），我想一次显示 3 个。

$start=0; $end=6;
    for($d=0;$d<$len;$d++)
    {   
        if($end>$count)
        {
            $end = $count;
            match_pro("Closley Match", array_slice($recent_arr, $start, $end),$d);
        }
        else 
        {
            match_pro("Closley Match", array_slice($recent_arr, $start, $end),$d);
            //break;
        }
        $start=$end; $end=$end+6;
    }

它返回 3 个 Div 作为响应...

1. 显示 - 下一个和上一个按钮。

SUMMARY -> 1-ajax 请求，一些 HTML div 作为响应，在一次单击一个按钮上按顺序显示它们。

我正在进行客户端分页，因为查询一次不能返回超过 9-12 个响应。所以客户端脚本应该是最佳的。

Answer 1

您可以将 div 放入一个数组中，然后返回。 例如：

$response = array(0 => 'div1_data', 1 => 'div2_data', 2=>'div3_data');
echo json_encode('html' => $response); // returning to ajax call

在ajax调用响应中可以保存到js数组中； 然后用第一个元素更新区域。 在下一个按钮上单击使用第二个元素更新区域... 希望它会有所帮助。

在js中你可以这样做：

index = 0;
res_data = [];
$.ajax({    
 type    : "POST",
 cache   : true,
 //dataType: "json",
 url     : "a.php",
 data    : {
            proid:id
          },                
  success: function(data) {
    $(data.html).each(function(k,v){

       res_data.push(v);

    });
    showNext();      
  }
});


function showNext(){
    $("#match_item_display").html(res_data[index]);
    index++;
}

function showPrev(){
    if(res_data[index-1] !== 'undefined'){
        $("#match_item_display").html(res_data[index-1]);
        index--;
    }
}

您可以在页面加载时进行 ajax 调用。 并将 showNext() 和 showPrev 分别分配给 next 和 prev 按钮的 onclick 事件。