2014-09-19 22 views
0

我有一個特定的場景,我需要使用分頁。Phongegap Jquery分頁加載聯繫人 - 如何在用戶到達最後一頁時動態添加頁面?

在Phonegap加載Android聯繫人時,當用戶瀏覽頁面時,當用戶點擊分頁的最後一頁時,我想另一組聯繫人列表被動態加載到添加到頁面的新頁面中現有的分頁。

我這樣做,因爲我要加載超過1000個聯繫人,這一點我不想在最初拍攝本身負載的清單 - 即使是其唯一的分頁。

我發現指向動態創建頁面,但什麼都沒有我的具體要求(加載新的列表進入新的頁面,當用戶到達最後一頁)。

此鏈接jQuery pagination with dynamic <li>是迄今爲止我發現的最佳鏈接,但仍需要一種方法來確定用戶是否已到達最後一頁,或分頁。

注意:這不是一個Ajax請求,其電話差距API,它會從原生Android通訊錄聯繫人,我必須通過手動對象迭代和動態動態創建列表。

而且,因爲默認情況下使用來分頁插件時的分頁按鈕,我不知道該怎麼事件添加到這些頁面的按鈕或調整它們。

我的代碼片段:

navigator.contacts.find(filter, onSuccess, onError, options); 

function onSuccess(contacts) { 
    var html = ""; 
    for (var i = 0; i < contacts.length; i++) { 
    if ($.trim(contacts[i].displayName).length != 0 || $.trim(contacts[i].nickName).length != 0) { 
     html += '<li>'; 
     html += '<h2>' + contacts[i].displayName ? contacts[i].displayName : contacts[i].nickName + '</h2>'; 
     if (contacts[i].phoneNumbers) { 
      html += '<ul class="innerlsv" data-role="listview" data-inset="true">'; 
      html += '<li><h3>Phone Numbers</h3></li>'; 
      for (var j = 0; j < contacts[i].phoneNumbers.length; j++) { var dialPadVar = '#main-wrapper'; 
       html += "<li onclick=\"contactAppendNumber('"+contacts[i].phoneNumbers[j].value+"');changePage('#main-wrapper');\">Type: " + contacts[i].phoneNumbers[j].type + "<br/>" + 
        "Value: " + contacts[i].phoneNumbers[j].value + "<br/>" + 
        "Preferred: " + contacts[i].phoneNumbers[j].pref + "</li>"; 
      } 
      html += "</ul>"; 
     } 
     html += '</li>'; 
    } 
} 
if (contacts.length === 0) { 
    html = '<li data-role="collapsible" data-iconpos="right" data-shadow="false" data-corners="false">'; 
    html += '<h2>No Contacts</h2>'; 
    html += '<label>No Contacts Listed</label>'; 
    html += '</li>'; 
} 
$("#contactsList").html(html); 
$("#contactsList").listview().listview('refresh'); 
$(".innerlsv").listview().listview('refresh'); 

} 
+0

你做了什麼?根據你的描述,當點擊某個頁面按鈕時,我不認爲在加載額外的項目(從服務器)方面有任何困難,無論是通過AJAX還是非AJAX。 – mrmoment 2014-09-19 06:14:13

+0

@mrmoment對不起,我正在使用Phonegap加載Android聯繫人,所以它不是ajax調用。此外,默認情況下使用插件時的分頁按鈕,所以我不知道如何添加事件到這些頁面按鈕或調整它們。我已編輯我的問題,請重新瀏覽 – joel 2014-09-19 19:02:51

回答

0

我以前見過你的問題 - 典型navigation.contacts.find()返回當前所有的聯繫人和它的超過1000個。而filter參數不好分頁。

我觸點陣列後,我把他們分成頁(50頁),但實際接觸都加載反正。

我認爲最好的辦法是細化PhoneGap API,允許偏差和限制對返回的聯繫人。一種解決方法可能是首次加載聯繫人,然後由他們自己管理(例如,將記錄寫入本地sqlite)。

jQuery插件,如果我用它做什麼,我只需要使用的工具(例如,瀏覽器)來觀察分頁按鈕IDsclass names並在$(document).ready()它們添加監聽。

如果您的意思是按鈕在開始時沒有呈現,因此您無法自行綁定偵聽器,則可能需要$(document).on('click','button.pagination', function(){...});,它會要求父節點(此處我直接使用文檔)充當事件的代理。 'button.pagination'是動態生成的分頁按鈕(更改爲您的正確元素)。

+0

謝謝這是迄今爲止的最佳答案 – joel 2014-09-23 02:37:48