marrub
/
snipt
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Better filtering - show page numbers as you filter.

master
Nick Sergeant 2013-09-06 01:32:44 -04:00
parent 4a8278c635
commit a34c8eb65e
4 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
jobs/templates/jobs/jobs.html
View File

@ -29,14 +29,14 @@
<div class="loading-jobs" ng-show="!jobs">
Loading jobs&hellip;
</div>
<div class="pagination ng-cloak" ng-cloak ng-show="jobs && numberOfPages() > 1">
<div class="pagination ng-cloak" ng-cloak ng-show="jobs">
<button class="btn prev" style="margin: 0 10px;" href ng-disabled="currentPage == 0" ng-click="currentPage=currentPage - 1">Previous</button>
<span class="page">{[{ currentPage + 1 }]} / {[{ numberOfPages() }]}</span>
<button class="btn next" style="margin: 0 10px;" ng-disabled="currentPage >= jobs.length / pageSize - 1" ng-click="currentPage=currentPage + 1">Next</button>
<button class="btn next" style="margin: 0 10px;" ng-disabled="currentPage >= filteredJobs.length / pageSize - 1" ng-click="currentPage=currentPage + 1">Next</button>
</div>
<section class="jobs">
<ul>
<li ng-repeat="job in jobs|filter:query|startFrom:currentPage * pageSize|limitTo:pageSize">
<li ng-repeat="job in filteredJobs|startFrom:currentPage * pageSize|limitTo:pageSize">
<a href="{[{ job.url }]}?aff=dbe7e" class="group">
<span class="left">
<span class="job">{[{ job.title }]}</span>
@ -50,10 +50,10 @@
</li>
</ul>
</section>
<div class="pagination ng-cloak" ng-cloak ng-show="jobs && numberOfPages() > 1">
<div class="pagination ng-cloak" ng-cloak ng-show="jobs">
<button class="btn prev" style="margin: 0 10px;" href ng-disabled="currentPage == 0" ng-click="currentPage=currentPage - 1">Previous</button>
<span class="page">{[{ currentPage + 1 }]} / {[{ numberOfPages() }]}</span>
<button class="btn next" style="margin: 0 10px;" ng-disabled="currentPage >= jobs.length / pageSize - 1" ng-click="currentPage=currentPage + 1">Next</button>
<button class="btn next" style="margin: 0 10px;" ng-disabled="currentPage >= filteredJobs.length / pageSize - 1" ng-click="currentPage=currentPage + 1">Next</button>
</div>
</div>
{% endblock %}

2
media/js/snipt-all.min.js vendored
View File

File diff suppressed because one or more lines are too long

14
media/js/src/jobs.js
View File

@ -17,19 +17,27 @@
});
// Controllers.
controllers.JobSearchController = function($http, $scope) {
controllers.JobSearchController = function($http, $scope, filterFilter) {
$scope.currentPage = 0;
$scope.pageSize = 10;
$http.get('/jobs-json/').then(function(response) {
$scope.jobs = response.data;
$scope.filterJobs();
});
$scope.filterJobs = function() {
$scope.filteredJobs = filterFilter($scope.jobs, $scope.query);
};
$scope.numberOfPages = function() {
if ($scope.jobs) {
return Math.ceil($scope.jobs.length / $scope.pageSize);
if ($scope.filteredJobs) {
return Math.ceil($scope.filteredJobs.length / $scope.pageSize);
}
};
$scope.$watch('query', function (val) {
$scope.filterJobs();
});
};

2
templates/base.html
View File

@ -389,7 +389,7 @@
<script type="text/javascript" src="{{ STATIC_URL }}js/src/search.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/src/jobs.js"></script>
{% else %}
<script type="text/javascript" src="{{ STATIC_URL }}js/snipt-all.min.js?59"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/snipt-all.min.js?60"></script>
{% endif %}
{% block inline-js %}