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"> <div class="loading-jobs" ng-show="!jobs">
Loading jobs&hellip; Loading jobs&hellip;
</div> </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> <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> <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>
<section class="jobs"> <section class="jobs">
<ul> <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"> <a href="{[{ job.url }]}?aff=dbe7e" class="group">
<span class="left"> <span class="left">
<span class="job">{[{ job.title }]}</span> <span class="job">{[{ job.title }]}</span>
@ -50,10 +50,10 @@
</li> </li>
</ul> </ul>
</section> </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> <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> <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>
</div> </div>
{% endblock %} {% 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.
controllers.JobSearchController = function($http, $scope) { controllers.JobSearchController = function($http, $scope, filterFilter) {
$scope.currentPage = 0; $scope.currentPage = 0;
$scope.pageSize = 10; $scope.pageSize = 10;
$http.get('/jobs-json/').then(function(response) { $http.get('/jobs-json/').then(function(response) {
$scope.jobs = response.data; $scope.jobs = response.data;
$scope.filterJobs();
}); });
$scope.filterJobs = function() {
$scope.filteredJobs = filterFilter($scope.jobs, $scope.query);
};
$scope.numberOfPages = function() { $scope.numberOfPages = function() {
if ($scope.jobs) { if ($scope.filteredJobs) {
return Math.ceil($scope.jobs.length / $scope.pageSize); 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/search.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/src/jobs.js"></script> <script type="text/javascript" src="{{ STATIC_URL }}js/src/jobs.js"></script>
{% else %} {% 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 %} {% endif %}
{% block inline-js %} {% block inline-js %}