HTML5 & JQueryMobile - 分页和过滤 UL 列表答案

【问题标题】：HTML5 & JQueryMobile - Paging and Filtering a UL ListHTML5 & JQueryMobile - 分页和过滤 UL 列表
【发布时间】：2013-03-02 14:27:32
【问题描述】：

我正在构建一个简单的 HTML5 应用程序，它具有 Ul 和过滤器，如下所示：

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

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

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

【问题讨论】：

标签： jquery html jquery-mobile pagination filtering

【解决方案1】：

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

  };

【讨论】：

这似乎不适用于 OP 的情况 - 你能澄清一下这有什么帮助吗？

【解决方案2】：

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

【讨论】：