Question

我正在构建一个简单的HTML5应用程序，其中包含UI和过滤器，如下所示：

<ul id="ItemsList" data-role="listview" data-inset="true" data-filter="true" >

此UL通过在div的页面显示上执行的Javascript方法动态填充。由于数据集较大，我希望能够过滤此列表，但同时保留过滤选项。

我似乎无法找到此类或任何先前问题的示例。有没有人知道解决这个问题的好方法？

Answer 1

您是在寻找Ajax解决方案还是在DOM中加载的列表项？对于Ajax解决方案，您可以尝试使用http://listomatic.stakbit.com/进行Ajax调用，每次点击/点击进行分页，并使用启用的搜索字段 - 对输入的搜索字符串进行Ajax调用。我是这个插件的开发者。

Answer 2

我只是设法写了一个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'
         });
     }

  };

HTML5＆amp; JQueryMobile - 分页和过滤UL列表

2 个答案: