유성 페이지 매김 문제?

-1

유적에서 컬렉션을 사용하여 사람 정보를 보여주기위한 샘플 예제를 만들었습니다. 여기에 더 많은 사람 정보를 표시 할 때 페이지 매김이 필요합니다. 또한 부트 스트랩의 도움으로 페이지 매김을했으나 작동하지 않았습니다. 아래 코드를보고 제안하십시오 나 어떻게해야하지?유성 페이지 매김 문제?

코드 : reactive-table 같은 테이블/데이터 그리드 패키지를 사용하여 가장 쉽게 작동 유성에

<template name="userlist"> 
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> 
    <script src="/js/bootstrap-paginator.min.js"></script> 

    <div class="clist"> 
     <div class="clistname" style="float:left;width:400px;"><h2>Client List</h2></div> 
     <div class="search" style="float:left;width:400px;padding-top:20px;"><div style="float:left;">Serch:</div><div style="float:left;"><input type="text" id="search" /></div></div> 
     <div class="addnewuser" style="float:right;padding-top:20px;"><input type="button" id="addnewuserD" value="Add" /></div> 
    </div> 

    <div class="chmenu" style="float:left;"> 
     <table class="cinfotable"> 
       <thead> 
        <tr> 
         <th><div class="cmenu"><u>UserId</u></div></th> 

         <th><div class="cmenu"><u>Patient</u></div></th> 

         <th><div class="cmenu"><u>Address</u></div></th> 

         <th><div class="cmenu"><u>SSN</u></div></th> 

         <th><div class="cmenu"><u>Action</u></div></th> 
        </tr> 
       </thead> 

       <tbody id="udatacontent"> 

        {{#each patientInfo}} 
         <tr class="cdata"> 

          <td><div class="cname">{{UserId}}</div></td> 
          <td><div class="cdata"> 
           <div class="user {{selected}}">{{Firstname}} {{Lastname}}</div> 

               <div class="userinfo">{{#if selected}} 
                 City: {{City}}<br> 
                 State: {{State}}<br> 
                 Country: {{Country}}<br> 
                 ZipCode: {{ZipCode}}<br> 
                 PhoneNo: {{PhoneNo}}<br> 
               {{/if}}</div> 
           </div></td> 
          <td><div class="cdata">{{City}}<br> 
                <br></div></td> 
          <td><div class="cdata">{{SSN}}</div></td> 
          <td><div class="paction">Access Ptient</div></td> 

         </tr> 
        {{/each}} 

       </tbody> 

      </table> 
    </div> 


    <script type='text/javascript'> 
     var options = { 
      currentPage: 3, 
      totalPages: 10 
     } 

     $('#udatacontent').bootstrapPaginator(options); 
    </script> 
</template>

출처

2014-02-27 Venkat

매김. 프로젝트의 GitHub을 확인하십시오. 몇 가지 예가 있습니다.

더 강력한 페이지 매김 패키지는 있지만 표 강화 항목은 meteor-pages입니다.

출처

2014-02-27 05:17:04

유성 페이지 매김 문제?

답변

관련 문제