我有一个包含30-60行数据的表。我想在前端对此进行分页。基本上是这样的:
First 1 2 3 4(<current) 5 6 .. 15(<last page) Last
jQuery将成为我相信的武器。任何好的教程/建议如何做到这一点?要记住什么等等。
答案 0 :(得分:0)
如果您想在客户端执行所有操作,此插件应该可以很好地完成操作:http://tablesorter.com
答案 1 :(得分:0)
在angularJs中,您可以像我们在Oodles Technologies中那样采用这种方法,
假设您需要使用UI-select指令显示3000-4000个内容。通常如果您在选择框或UI中绑定超过500个条目 - 如果您单击选择框或UI选择,网站将停留一段时间,那么如何解决此问题? 为了解决这个问题,你要做两件事: - 1.限制过滤 2.警告控制器用户已到达列表底部的指令
Ui中的分页选择
<ui-select ng-model="education.clg" name="clg" theme="select2" append-to-body="true" sortable="true" >
<ui-select-match placeholder="Select institution/university">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="college in colleges | propsFilter: {name: $select.search} >
<div ng-bind-html="college.name | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
现在在&#34; ui-select-choices&#34;
中添加limitTo过滤器
现在创建一个指令,确定用户已达到列表中。
angular.module('app',[]).directive('scrollDetector', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var raw = element[0];
element.bind('scroll', function () {
if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
console.log("end of list");
scope.$apply(attrs.scrollDetector);
}
});
}
};
});
让我们在ui-select中使用上面的指令。在指令
中添加scroll-detector = loadMore() <ui-select-choices repeat="college in colleges | propsFilter: {name: $select.search} >
<div ng-bind-html="college.name | highlight: $select.search" | limitTo:currentElement" scroll-detector="loadMore()"> </div>
</ui-select-choices>
现在初始化控制器中的currentElement $ scope.currentElement = 20; 在同一个控制器中添加loadMore()函数
$scope.loadMore=function(){
console.log("loadMore");
$scope.currentElement=$scope.currentElement+20;
}
当用户到达列表底部时,这将增加20。如果你想将currrent元素重置为20,如果用户点击侧面ui-选择只需使用下面的行重新设置它。
var myDiv=angular.element(document.querySelector('#myDiv'));
myDiv.click(function(){
// reset back to 20
$scope.currentElement=20;
})
希望有所帮助