通过JavaScript进行客户端分页


Client Side Pagination via JavaScript

我有3个文件

  1. index.php
  2. js文件
  3. a.php

我将ajax查询从index.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返回Divs的动态数组。它可能是3,4,5,。。。等等。这个结果出现在ajax成功函数中。我想在index.php上一次显示一个Div。我还想要一个next和previous按钮来显示nextdiv或previousdiv,以及如何在index.php中使用json return Data use。??是否有任何使用此数组的功能可以直接转到index.php,在那里我们根据需要对其进行迭代。请帮帮我。。。!!!

如果我是你,我会查看jquery ui。它有一个非常容易实现的选项卡导航插件,您可以用一些简单的DOM操作($(foo).html(bar)$(foo).append(bar)等)来填充它。

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

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

最后,使用以下ajax代码,您可以填充您的配偶

$.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/