Question

我对此完全陌生，所以如果我没有得到足够的信息，请原谅我。我使用JSON和listview显示可能有数千条记录，但是我需要一次只显示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名员工。当阵列中没有更多员工时，您会隐藏“获取更多”按钮。

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

您还可以查找插件以进行分页。

一些例子：

分页：使用带有getJSON的“获取更多”按钮

1 个答案: