流星中的分页问题?

时间:2014-02-27 05:12:59

标签: twitter-bootstrap pagination meteor

我做了一个示例,用于在meteor中显示使用集合的人信息。在显示更多人信息时我需要分页。我也在引导程序的帮助下进行了分页但是没有工作。所以请看下面的代码和建议我该怎么做?

代码:

<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 个答案:

答案 0 :(得分:1)

meteor中的分页最容易使用像reactive-table这样的table / datagrid包。检查项目的GitHub,有几个例子。

更强大的分页包,但不是表格增强包,是meteor-pages