javascript - Pagination: using a "Get More" button with getJSON - Stack Overflow

admin管理员组

文章数量:1392081

I am pletely 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:

/

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="/' + 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>      

I am pletely 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/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./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>      

• javascript
• jquery
• html
• json
• pagination

Share Improve this question Follow edited Dec 16, 2016 at 6:47 GG. 21.9k1414 gold badges9292 silver badges133133 bronze badges asked Sep 16, 2012 at 16:31 NeostimNeostim 7111 silver badge88 bronze badges 2

• 2 Pagination is the keyword you're looking for, and I don't see any implementation of this. You would need to set a LIMIT in your server-side script to tell your controller to return only the next 20 items. I also don't see any server-side code, so that's very hard to do. – Ohgodwhy Commented Sep 16, 2012 at 16:34
• I could try passing a limit variable from JS to my server side to restrict in 20 increments each time it's called, I'm just not sure how to do it on the JS side. I'll do some more searching for pagination as well, thank you! – Neostim Commented Sep 16, 2012 at 16:43

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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./beneverard/jqPagination
• https://github./luis-almeida/jPages
• https://github./gbirke/jquery_pagination
• https://github./fedecarg/jquery-paginate
• https://github./wesnolte/Pajinate

本文标签： javascriptPagination using a quotGet Morequot button with getJSONStack Overflow