Client Side Pagination через JavaScript

Question

У меня есть 3 файлов

1. index.php
2. JS файл
3. a.php

я посылаю АЯКС запрос A.php из индекса. php и ajax-код записывается в файле js file Запрос =>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 return dynamic array of Divs. Это может 3, 4, 5, ... так ... дальше. Этот результат входит в функцию успеха ajax. Я хочу показать Div по index.php по одному за раз. и я хочу также следующую и предыдущую кнопку, чтобы показать следующий div или предыдущий div и как использовать json return Использование данных в index.php. ?? Есть ли какие-либо функциональные возможности для использования этого массива, напрямую идет в index.php, и мы повторяем его в соответствии с нашим требованием. Пожалуйста, помогите мне...!!!

Answer 1

Я бы выбрал jquery ui, если бы был вами. Он имеет очень простой в использовании плагин tabbed navigation, который вы можете заполнить несколькими простыми манипуляторами DOM ($(foo).html(bar), $(foo).append(bar) и т. Д.).

Answer 2

У вас есть эта разметка в вашем index.php для загрузки json-данных, поступающих по вашему запросу ajax.

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

Наконец, используя следующий код ajax, вы можете заполнить свой карусный 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/