我正在构建一个简单的 HTML5 应用程序,它具有 Ul 和过滤器,如下所示:
<ul id="ItemsList" data-role="listview" data-inset="true" data-filter="true" >
这个 UL 是从在 div 的 pageshow 上执行的 Javascript 方法动态填充的。由于数据集很大,我希望能够过滤此列表,但同时保留过滤选项。
我似乎找不到此类或任何先前问题的示例。有谁知道解决这个问题的好方法?
我正在构建一个简单的 HTML5 应用程序,它具有 Ul 和过滤器,如下所示:
<ul id="ItemsList" data-role="listview" data-inset="true" data-filter="true" >
这个 UL 是从在 div 的 pageshow 上执行的 Javascript 方法动态填充的。由于数据集很大,我希望能够过滤此列表,但同时保留过滤选项。
我似乎找不到此类或任何先前问题的示例。有谁知道解决这个问题的好方法?
您是在寻找 Ajax 解决方案还是列表项全部加载到 DOM 中?对于 Ajax 解决方案,您可以尝试http://listomatic.stakbit.com/,它会在每次点击/单击时进行 Ajax 调用以进行分页,并且将在启用搜索字段的情况下工作 - 对键入的搜索字符串进行 Ajax 调用。我是这个插件的开发者。
我只是设法为它写了一个 jquery 插件,因为我没有找到任何好的解决方案。我今天刚刚完成,需要几天时间才能将其作为免费插件上传。现在您可以通过 akhilesh.gandhi@gmail.com 与我联系,或者这里是解决方案
$.fn.scrollPagination.loadContent = function(obj, opts){
var target = opts.scrollTarget;
var mayLoadContent = $(target).scrollTop()+opts.heightOffset >= $(document).height() - $(target).height();
if (mayLoadContent && (page <= noofpage)){
if (opts.beforeLoad != null){
opts.beforeLoad();
}
$(obj).children().attr('rel', 'loaded');
var pageurl = opts.contentPage + "?q=" + opts.query + "&take=" + opts.take + "&skip=" + opts.skip + "&page=" + page + "&pagesize=" + opts.pagesize
$.ajax({
type: 'Get',
url: pageurl,
data: opts.contentData,
success: function (data) {
noofpage = data[0].Count / opts.pagesize;
page = page + 1;
$(obj).append(data);
var objectsRendered = $(obj).children('[rel!=loaded]');
if (opts.afterLoad != null){
opts.afterLoad(data);
}
},
dataType: 'json'
});
}
};