我正在开发一个在智能表中显示数据的网页,因为我需要允许用户选择多行进行处理。
我正在使用AngularJS
版本1.3.20。
我有一个测试网页,我在其上复制了GitHub上的示例(lorenzofox2.github.io/smart-table-website)。我将提供的表脚本复制到我的测试HTML
中。我将提供的JavaScript
脚本复制到我的客户端控制器中。我通过我的应用程序执行网页。将打开网页,并显示相应的数据。网页未按照定义显示页脚中的分页。我不知道为什么这个分页没有显示出来。
下面列出了HTML
,JavaScript
和结果
HTML:
<div class="smart-table">
<table st-table="rowCollection" class="table table-striped">
<thead>
<tr>
<th st-sort="firstName">first name</th>
<th st-sort="lastName">last name</th>
<th st-sort="birthDate">birth date</th>
<th st-sort="balance">balance</th>
<th>email</th>
</tr>
<tr>
<th>
<input st-search="'firstName'" placeholder="search for firstname" class="input-sm form-control" type="search"/>
</th>
<th colspan="4">
<input st-search placeholder="global search" class="input-sm form-control" type="search"/>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection">
<td>{{row.firstName | uppercase}}</td>
<td>{{row.lastName}}</td>
<td>{{row.birthDate | date}}</td>
<td>{{row.balance | currency}}</td>
<td><a ng-href="mailto:{{row.email}}">email</a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="7"></div>
</td>
</tr>
</tfoot>
</table>
</div>
JavaScript:
var
nameList = ['Pierre', 'Pol', 'Jacques', 'Robert', 'Elisa'],
familyName = ['Dupont', 'Germain', 'Delcourt', 'bjip', 'Menez'];
function createRandomItem() {
var
firstName = nameList[Math.floor(Math.random() * 4)],
lastName = familyName[Math.floor(Math.random() * 4)],
age = Math.floor(Math.random() * 100),
email = firstName + lastName + '@whatever.com',
balance = Math.random() * 3000;
return{
firstName: firstName,
lastName: lastName,
age: age,
email: email,
balance: balance
};
}
$scope.itemsByPage=15;
$scope.rowCollection = [];
for (var j = 0; j < 200; j++) {
$scope.rowCollection.push(createRandomItem());
}
结果
如果我使用AngularJS
的相应版本,我希望有人能告诉我。如果是这样,我希望有人可以引导我进入我错过的东西吗?
答案 0 :(得分:0)
进一步搜索后,这个问题是运行1.3.0版本的smart-table而不是2.1.8的结果。将angular-smart-table升级到2.1.8版后,问题已解决