客戶端分頁通過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/