通过JavaScript进行客户端分页

时间:2012-02-16 08:34:57

标签: php jquery mysql json

我有3个文件

  1. 的index.php
  2. js file
  3. a.php只会
  4. 我从index.php向a.php发送ajax查询,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,我们按照我们的要求迭代它。请帮我...!!!

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

考虑在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/