我似乎已經想通了如何d這個。我想避免在項目中使用大量庫,只是爲了簡單起見,使用上面的答案來指導(還有一點挖掘),基本上我的最終目標是使用jQuery獲取一長串數據,並將此數據格式化爲多個頁面列表(爲此我使用了一個用於格式化的表格)。假設這是一個名稱列表。該JSON結果輸出爲:
[{"first_name":"Bob"},{"last_name":"Jones"}] // (key, value)
但是當我通過這個通過對HTML表這只是顯示結果的1000在一個單獨的列表,並格式化列表是一個痛苦。這是我的解決方案:
<script>
var pageNum = ""; // define Page Number variable for later.
var resLimit = 35; // variable to specify the number of results per page
function updateList() {
$.getJSON(" Location of JSON results ", function(data) {
var pageCount = Math.round(data.length/resLimit); // calculate number of pages
var auto_id = ((pageNum-1)*resLimit) // use variables to give each result an id
var newListData = ""; // define this for use later
然後定義和「新列表數據」傳遞給HTML表:
var newListData = "";
$.each(data.slice(auto_id, (pageNum*resLimit)), function(key, value) {
auto_id++;
newListData += '<tr>';
newListData += '<td class="id">' + audo_id + '</td>';
newListData += '<td class="id">' + value.first_name + '</td>';
newListData += '<td class="id">' + value.last_name + '</td>';
newListData += '</tr>';
});
$('# ID of table, data will replace existing rows ').html(newListData);
在這一點上,如果你頁次的值設置爲1,你應該看到的第35結果在列表中,全部使用自動遞增的ID號碼。如果將其更改爲2並刷新頁面,則應看到下一個35,並在第一頁上顯示ID號。
接下來,我需要爲每個頁面創建一個按鈕:
$('# ID of table, data will replace existing rows ').html(newListData);
function createButtons() {
var buttonArray = "";
for(i=0, x=pageCount; i<x; i++) {
buttonArray += '<input type="button" onclick="changePage('
+ (i + 1) + ')" value="' + (i + 1) + '">';
}
$('# ID of Span tags for button container ').html(buttonArray); }
createButtons();
}); }
</script>
然後創建changePage(),並刷新列表中的數據自動不搞亂事情
<script>
var pageNum = "";
function changePage(page) {
if (pageNum < 1) { pageNum = 1; } // set pageNum when the page loads
if (page > 0) { pageNum = page; } // overwrite pageNum when 'page' variable is defined
updateList(); }
changePage(); // initialise to prevent delayed display on page load
// refresh function:
function refreshData() {
changePage(0); // define 'page' as 0 so that pageNum is not overwritten
window.setTimeout(refreshData, 5000); } // loop this function every 5 seconds to
refreshData(); //-- keep this list populated with current data.
功能
而這應該只是做它!至少它在爲我工作,但我可能錯過了一些東西(希望不是大聲笑)。希望這可以幫助別人涉及這方面的一些事情,可以外推和其他地方使用:)
感謝大家的幫助。
一個選擇是將所需的變量值自定義屬性添加到您的錨標記,並在javascript函數中訪問它。 – mrogers