Best way to do a pagination on front end - pagination

Question

I have a table that has a data for 30-60 rows. I would like to paginate this on front end. Basically something like:
First 1 2 3 4(<current) 5 6 .. 15(<last page) Last
jQuery would be the weapon for this I believe. Any good tutorials/advices how to do this? What to remember etc.

Answer 1

If you want to do everything on the client side, this plugin should do the trick very well: http://tablesorter.com

Answer 2

In angularJs, you may follow this approach as we do in Oodles Technologies,
Assume that their are 3000-4000 enties that you need to show with UI-select directive. usually if you bind more than 500 entries in select box or UI-select the website will get stucked for some time if you click on the select box or UI-select ,so how to solve this problem ?
Inorder to solve this problem you to two things:-
1. limitTo filter
2. A directive that alert controller that user has reached the bottom of list
Pagination in Ui select
<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>
Now add limitTo filter in "ui-select-choices"
Now Create a directive that determine that user has reached down of list.
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);
}
});
}
};
});
Lets use the above directive in ui-select. add scroll-detector=loadMore() in directive
<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>
Now initialize currentElement in controller
$scope.currentElement=20;
Add loadMore() function in same controller
$scope.loadMore=function(){
console.log("loadMore");
$scope.currentElement=$scope.currentElement+20;
}
This will increment by 20 when user reach bottom of list. if you want to reset currrent element back to 20 if user click out side ui-select just use the below line to reset it back.
var myDiv=angular.element(document.querySelector('#myDiv'));
myDiv.click(function(){
// reset back to 20
$scope.currentElement=20;
})
Hope it helps