用于加载联系人的Phonegap Jquery Pagination - 当用户到达最后一页时如何动态添加页面？答案

【问题标题】：Phonegap Jquery Pagination for loading contacts - how to add pages dynamically when user reaches last page?用于加载联系人的Phonegap Jquery Pagination - 当用户到达最后一页时如何动态添加页面？
【发布时间】：2014-11-13 15:56:03
【问题描述】：

我有一个需要使用分页的特定场景。

在 Phonegap 从 Android 联系人加载时，当用户浏览页面时，当用户点击分页中的最后一页时，我希望将另一组联系人列表动态加载到添加到现有页面的新页面中分页。

我这样做是因为我必须加载超过 1000 个联系人的列表，我不想在初始镜头本身上加载这些列表 - 即使它只是分页。

我找到了动态创建页面的链接，但没有一个有我的特定要求（当用户到达最后一页时将新列表加载到新页面中）。

此链接jQuery pagination with dynamic <li> 是迄今为止我找到的最佳链接，但我仍然需要一种方法来确定用户是否已到达最后一页，在分页中。

注意：这不是一个 ajax 请求，它是一个电话间隙 api，它从本机 android 联系人获取联系人，我必须手动迭代对象并动态创建列表。

此外，由于使用分页插件时分页按钮是默认设置的，我不知道如何向这些页面按钮添加事件或调整它们。

我的代码 sn-p:

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');

}

【问题讨论】：

你做了什么？根据您的描述，我认为在单击页面按钮之一时（无论是否通过 AJAX）加载额外的项目（从服务器）没有任何困难。
@mrmoment 抱歉不准确，我正在使用 Phonegap 加载 Android 联系人，所以它不是 ajax 调用。使用插件时的分页按钮也是默认设置的，所以我不知道如何向这些页面按钮添加事件或调整它们。我已经编辑了我的问题，请重新查看

标签： jquery dynamic pagination

【解决方案1】：

我之前遇到过你的问题 - 典型的navigation.contacts.find() 返回所有当前联系人，超过 1000 个。而且filter 参数不利于分页。

得到联系人数组后，我将它们分成页面（每页 50 个），但联系人实际上都已加载。

我认为最好的方法是改进PhoneGap API 以允许偏移和限制返回的联系人。一种解决方法可能是第一次加载联系人，然后自己管理它们（例如，将记录写入本地 sqlite）。

对于jQuery插件，如果我正在使用它，我只需要使用工具（例如Chrome）来观察分页按钮IDs或class names并在@987654327上添加一个监听器@。

如果您的意思是按钮未在开始时呈现，因此您无法将侦听器绑定到自己，您可能需要$(document).on('click','button.pagination', function(){...});，它要求父节点（这里我直接使用文档）充当代理事件。 'button.pagination' 是动态生成的分页按钮（在您的情况下更改为适当的元素）。

【讨论】：

【解决方案2】：

但是为了达到本机速度，我使用插件来调用 android 的本机联系人应用程序

如果有人遇到我的问题，他们可以使用此方法，因为它可以在设备上提供最佳性能。

参考链接

How to implement contacts filter in android phonegap?

https://github.com/hazemhagrass/ContactPicker

【讨论】：