分页：如果在使用的getJSON一个“更多”按钮(Pagination: using a “Get

我完全的新本，所以请原谅我，如果我没有得到足够的信息。 我可能显示成千上万的使用JSON和列表视图的记录，不过，我需要只显示20的时间，与在底部的“显示更多”按钮。 我不明白我怎么会改变我目前的javascript考虑到这一点，希望有人能指出我在正确的方向。 我一直在试图将此代码来得到它的工作，但没有成功：

http://jsfiddle.net/knuTW/2/

我目前的JavaScript来显示JSON数据：

function getEmployeeList() {
$.getJSON(serviceURL + 'getmeals.php?calfrom='+ var1 + '&calto=' + var2, function(data) {
    $('#employeeList li').remove();
    employees = data.items;
    $.each(employees, function(index, employee) {
        $('#employeeList').append('<li><a href="employeedetails.html?id=' + employee.id + '">' +
            '<img src="http://www.restaurants.com/assets/img/logos/' + employee.restaurant + '.jpg"/>' +    
                '<h4>' + employee.meal_item + '</h4>' +
                '<p>Calories: ' + employee.calories + '</p>' +
                '<span class="ui-li-count">' + employee.protein + '</span></a></li>');

    });
    $('#employeeList').listview('refresh');
});
}

HTML：

<div id="employeeListPage" data-role="page" >

<div data-role="header" data-position="fixed">
    <h1>Restaurant Meals</h1>
</div>

<div data-role="content">
     <ul id="employeeList" data-role="listview" data-filter="true"></ul>
     <ul class="load-more"><a href="#">Load More</a></ul>
</div>      

Answer 1:

我们的想法是两个参数添加到您的$.getJSON ： limit和offset 。

Limit是你想要的行数。 所以我们可以说20行。

Offset是要开始搜索的行号。 所以0，则20然后40等

点击“更多”，你重复你的$.getJSON与+20偏移。

在后台，你的SQL查询应该是这样的：

$query = "SELECT * FROM table LIMIT $offset, $limit";

当查询返回任何内容，这意味着用户到达终点。

然后你就可以隐藏“更多”按钮。

---

另一种解决方案是用一个让所有员工$.GetJSON然后将结果存储在一个变量。 通过显示前20名员工开始。 如果用户点击“更多”，就显示下一个20名员工。 当有你的数组中没有更多的员工，你隐藏“更多”按钮。

有了这个解决方案，你会避免进行多次请求到服务器。

---

你也可以找一个插件，使您的分页。

一些例子：

• https://github.com/beneverard/jqPagination
• https://github.com/luis-almeida/jPages
• https://github.com/gbirke/jquery_pagination
• https://github.com/fedecarg/jquery-paginate
• https://github.com/wesnolte/Pajinate

文章来源: Pagination: using a “Get More” button with getJSON