客户端分页通过JavaScript

Question

我有3个文件

1. 的index.php
2. JS文件
3. a.php只会

我发送AJAX查询从指数a.php只会。 php和ajax代码是用js文件编写的意思是 请求=>index.php->js->a.php

Ajax代码如下：

$.ajax({  
     type : "POST", 
     cache : true, 
     dataType: "json", 
     url  : "a.php", 
     //async:false, 
     data : { 
        proid:id 
        },     
     success: function(data) { 

      //console.log(data); 
      var a = data.length; 




     } 
    }); 

a.php返回Div的动态数组。它可能是3,4,5，...等等。这个结果出现在ajax成功函数中。 我想每次在index.php上显示Div。我也想要一个下一个和上一个按钮来显示下一个div或以前的div，以及如何使用json返回在index.php中使用数据。是否有任何功能使用这个数组直接去index.php，我们按照我们的要求迭代它。请帮帮我...！！！

Answer 1

如果我是你，我会检查出jquery ui。它有一个非常易于实现的插件，您可以使用一些简单的DOM操作（$(foo).html(bar)，$(foo).append(bar)等）来填充该插件。

Answer 2

考虑你在你的index.php中有这个标记来加载你的ajax请求发出的json数据。

<div id='divCarousal'></div> 
<input type='button' id='prev' value='Prev' /> 
<input type='button' id='next' value='Next' />​ 

最后使用下面的ajax代码，你可以填充你的carousal div。

$.ajax({  
     type : "POST", 
     cache : true, 
     dataType: "json", 
     url  : "a.php", 
     success: function(data) { 
      //Below is the dummy data 
      var data = [ 
       {"div": '<div>1</div>'}, 
       {"div": '<div>2</div>'}, 
       {"div": '<div>3</div>'} 
      ]; 
      $.each (data, function() { 
       $('#divCarousal').append(this.div); 
      }); 

      $('#divCarousal').children('div:not(:first)').hide(); 

      $('#next').click(function() { 
       $('div#divCarousal > div:visible').hide().next().show(); 
       if ($('div#divCarousal > div:visible').next().length == 0) { 
        $(this).attr('disabled', true); 
       } else { 
        $('#prev').attr('disabled', false); 
       } 
      }); 

      $('#prev').click(function() { 
       $('div#divCarousal > div:visible').hide().prev().show(); 
       if ($('div#divCarousal > div:visible').prev().length == 0) { 
        $(this).attr('disabled', true); 
       } else { 
        $('#next').attr('disabled', false); 
       } 
      }); 
     } 
    }); 

演示：http://jsfiddle.net/ufDtm/