分页:使用带有getJSON的"获取更多"按钮

Question

我是全新的,所以如果我没有得到足够的信息,请原谅我.我使用JSON和lis​​tview显示可能有数千条记录,但是我需要一次只显示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