我做了一个示例,用于在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>
答案 0 :(得分:1)
meteor中的分页最容易使用像reactive-table这样的table / datagrid包。检查项目的GitHub,有几个例子。
更强大的分页包,但不是表格增强包,是meteor-pages。