分页：使用“获取更多”按钮与getJSON [英] Pagination: using a "Get More" button with getJSON

问题描述

我对此完全陌生，所以请原谅我，如果我没有得到足够的信息。我使用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索引，员工）{
 $（'＃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>卡路里：'+ employee.calories +'< / p>'+ 
'< span class =ui-li-count>'+ employee.protein +'< / span>< / a>< / li>'）; 
 
}）; 
 $（'＃employeeList'）。listview（'refresh'）; 
}）; 
} 
  

HTML：

 < div id =employeeListPagedata-role =page> 
 
< div data-role =headerdata-position =fixed> 
< h1>餐馆餐< / h1> 
< / div> 
 
< div data-role =content> 
< ul id =employeeListdata-role =listviewdata-filter =true>< / ul> 
< ul class =load-more>< a href =＃>加载更多< / a>< / ul> 
< / div> 
  

解决方案

这个想法是为你的 $。getJSON ：限制和偏移。

限制是您想要的行数。所以我们假设有20行。

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

通过点击获取更多，您重复您的 $。getJSON 与

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

  $ query =SELECT * FROM table LIMIT $ offset，$ limit; 
  

当查询不返回任何内容时，表示用户已到达结尾。

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

---

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

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

---

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

<一些例子：

• 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

I am completely new to this, so please forgive me if I don't get enough information. I'm displaying potentially thousands of records using JSON and a listview, however I need to only show 20 at a time, with a "show more" button at the bottom. I'm not understanding how I would change my current javascript to allow for this, hopefully someone can point me in the right direction. I've been trying to apply this code to get it to work, but unsuccessfully:

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

My current javascript to display the JSON data:

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>      

解决方案

The idea is to add two parameters to your $.getJSON : limit and offset.

Limit is the number of rows you want. So let's say 20 rows.

Offset is the row number where you want to start your search. So 0 then 20 then 40 etc.

By clicking "get more", you repeat your $.getJSON with an offset of +20.

In the backend, your SQL query should look like:

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

When the query returns nothing, it means the user reaches the end.

Then you can hide the "get more" button.

---

Another solution is to get all the employees with a single $.GetJSON then store the result in an variable. You start by displaying the first 20 employees. If the user clicks on "get more", you display the next 20 employees. When there are no more employees in your array, you hide the "get more" button.

With this solution, you will avoid to make several requests to your server.

---

You can also look for a plugin to make your pagination.

Some examples:

• 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

这篇关于分页：使用“获取更多”按钮与getJSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！