2014-02-27 126 views
-1

我做了一個示例,用流星中的集合顯示個人信息。在顯示更多人員信息時,我需要分頁。我也是在bootstrap的幫助下做了分頁,但不工作。所以請參閱下面的代碼並提出建議我該怎麼辦?流星中的分頁問題?

代碼:

<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> 

回答

1

分頁流星最容易使用的工作表/數據網格包像reactive-table。檢查項目的GitHub,那裏有幾個例子。

更強大的分頁包,但不是表增強的一個,是meteor-pages