HTML5 & JQueryMobile - 페이징과 UL 목록

Question

나는 아래와 같이 UL 및 필터가 간단한 HTML5 응용 프로그램 구축하고 필터링 :

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

이 UL은에 실행하는 자바 스크립트 방법에서 동적으로 채워집니다를 div의 pageshow. 큰 데이터 세트로 인해이 목록을 필터링 할 수 있지만 동시에 필터링 옵션을 유지할 수 있기를 원합니다.

나는 그런 질문이나 이전 질문의 예를 찾을 수 없습니다. 누구든지이 문제를 해결할 수있는 좋은 방법을 알고 있습니까?

Answer 1

Ajax 솔루션을 찾고 계십니까? 아니면 DOM에로드 된 모든 목록 항목입니까? Ajax 솔루션의 경우 http://listomatic.stakbit.com/을 사용해 페이지 매김을 위해 각 탭/클릭과 함께 Ajax 호출을 수행하고 검색 필드를 사용 가능하게 설정하여 입력 된 검색 문자열에 대해 Ajax 호출을 수행 할 수있다. 나는이 플러그인의 개발자 다.

Answer 2

좋은 솔루션을 찾지 못해서 jquery 플러그인을 작성하기 만했습니다. 방금 완료했는데 무료 추가 기능으로 업로드하는 데 며칠이 걸릴 것입니다. 지금 당신은 akhilesh.gandhi@gmail.com 에서 저를 도달 할 수 또는 여기 이것은 OP의 상황에 적용 할 나타나지 않습니다 솔루션

$.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' 
     }); 
    } 

    };