2

我对此完全陌生，所以如果我没有得到足够的信息，请原谅我。我使用 JSON 和列表视图显示可能有数千条记录，但是我一次只需要显示 20 条，底部有一个“显示更多”按钮。我不明白我将如何更改我当前的 javascript 以实现这一点，希望有人能指出我正确的方向。我一直在尝试应用此代码以使其正常工作，但未成功：

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

我当前用于显示 JSON 数据的 javascript：

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>

4

1 回答 1

8

这个想法是向您的$.getJSON:limit和. 添加两个参数offset。

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

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

通过单击“获取更多”，您$.getJSON以 +20 的偏移量重复您的操作。

在后端，您的 SQL 查询应如下所示：

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

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

然后您可以隐藏“获取更多”按钮。

另一种解决方案是让所有员工都使用一个，$.GetJSON然后将结果存储在一个变量中。首先显示前 20 名员工。如果用户点击“获得更多”，则显示接下来的 20 名员工。当您的数组中没有更多员工时，您隐藏“获取更多”按钮。

使用此解决方案，您将避免向服务器发出多个请求。

您还可以寻找一个插件来进行分页。

一些例子：

于 2012-09-16T17:12:48.650 回答