Question

我使用JQuery post从表单加载数据。

$("#SortItmesForm").submit(function() {
    $.post("filtItems.php",
        $("#FiltItemsForm").serialize(),
        function(data) {
            /*alert(data);*/
            $('#results').html(data);
        }
    );
    return false; //Code after form submitted
});

FiltItems.php输出到

<div id="results"></div>

如下。

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

有人可以给我一些指导，如何对加载的结果进行分页。最好用JQuery。

我尝试过很多JQuery插件，但是它们都没有用于加载ajax的数据。

Answer 1

当然，在这种情况下，你的CSS也很重要。我们假设您希望每个li都显示为一个页面。

<ul id="list_container">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<a href="javascript:paginate.move('left');">&lt;</a> | <a href="javascript:paginate.move('right');">&gt;</a>

的CSS：

#results{
    width:200px;
    height:200px;
    overflow:hidden;
}

#list_container{
    width:600px;
    margin-left:0px;
}

#list_container li{
    width:200px;
    float:left;
}

JS：

var paginate = {
    cur_offset: 0,
    move: function move(dir)
    {
        if(dir == 'left')
        {
            paginate.cur_offset -= 200;
            $('#list_container').animate({marginLeft: paginate.cur_offset + 'px'}, 1000);
        }
        else
        {
            paginate.cur_offset += 200;
            $('#list_container').animate({marginLeft: paginate.cur_offset + 'px'}, 1000);
        }
    }
};

显然你会想要制定条款，所以如果你在第1页上你禁用了左箭头和你禁用的最后一页，但那些很容易处理。

我也有可能误解你的问题。如果您在浏览器中呈现ajax调用的结果时遇到问题，那么您可能需要像这样设置dom元素：

var elem = $('<div>');
elem.attr('id', some_id);
elem.html(data.html); // assuming you pass json, if not then just data
$('#results').append(elem);

另外，如果某些函数不能与新创建的dom元素一起使用，请查看jquery .live。

至于插件 - 这很模糊。因为分页是一件非常简单的事情，所以我不知道jquery的“分页”插件。我从未发现需要搜索基本插件。

如果这个答案有用但需要更多信息，请告诉我，如果可能，我会更新。

如何分页ajax加载的数据？

1 个答案: