分頁：在getJSON上使用「Get More」按鈕

我對此完全陌生，所以請原諒我，如果我沒有獲得足夠的信息。我使用JSON和listview顯示數千條記錄，但是我需要一次只顯示20條記錄，並在底部顯示「顯示更多」按鈕。我不理解我會如何改變我目前的javascript來允許這個，希望有人能指出我正確的方向。我一直在試圖將此代碼來得到它的工作，但沒有成功：分頁：在getJSON上使用「Get More」按鈕

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>

來源

2012-09-16 Neostim

分頁是你要找的關鍵詞，而且我沒有看到這方面的任何實施。你需要在你的'服務器端腳本'中設置一個'LIMIT'來告訴''controller'只返回'下一個20個項目'。我也沒有看到任何服務器端代碼，所以這很難做到。 – Ohgodwhy

我可以嘗試從JS傳遞一個限制變量到我的服務器端，每次調用它時都會以20個增量進行限制，我只是不確定如何在JS端做到這一點。我會再做一些分頁搜索，謝謝！ – Neostim

這個想法是將兩個參數添加到您的$.getJSON：limit和offset。

Limit是你想要的行數。所以我們說20行。

Offset是您想要開始搜索的行號。所以0然後20然後40等

通過單擊「獲取更多」，您重複您的$.getJSON與偏移量+20。

在後臺，你的SQL查詢應該是這樣的：

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

當查詢返回任何內容，這意味着用戶到達終點。

然後您可以隱藏「獲取更多」按鈕。

另一種解決方案是讓所有的員工提供一個單一$.GetJSON然後將結果存儲在一個變量。首先顯示前20名員工。如果用戶點擊「獲取更多」，則顯示接下來的20名員工。當數組中沒有更多員工時，可以隱藏「獲取更多」按鈕。

使用此解決方案，您將避免向服務器發出多個請求。

你也可以找一個插件來製作你的分頁。

一些例子：

來源

2012-09-16 17:12:48

完美！謝謝:) – Neostim

哪裏是「獲取更多」按鈕？那麼所有的頁面都可以分頁。 – B4NZ41

分頁：在getJSON上使用「Get More」按鈕

回答

相關問題