add pagination (#116)

add search pagination
This commit is contained in:
HanQing 2017-12-16 10:05:05 +08:00 committed by Listen 1
parent 4c2bd7f27c
commit e7a0046f5f
6 changed files with 91 additions and 21 deletions

View File

@ -1041,3 +1041,18 @@ li {
.settings-content {
padding: 20px;
}
.btn-group button,.btn-pagination,.btn-pagination:focus {
background-color: #333333;
color: #ffffff;
border-color: #333333;
}
.btn-group button:hover,.btn-pagination:hover {
background-color: #ffffff;
color: #333333;
}
.searchbox li>a:hover{
color: #333333;
}

View File

@ -928,20 +928,22 @@
$scope.tab = 0;
$scope.keywords = '';
$scope.loading = false;
$scope.curpagelog = [1,1,1]; // [网易,虾米,QQ]
$scope.totalpagelog = [1,1,1];
$scope.curpage = 1;
$scope.totalpage = 1;
$scope.changeTab = function(newTab){
$scope.loading = true;
$scope.tab = newTab;
$scope.result = [];
updateCurrentPage();
updateTotalPage();
if ($scope.keywords===''){
$scope.loading = false;
}else{
loWeb.get('/search?source=' + getSourceName($scope.tab) + '&keywords=' + $scope.keywords).success(function(data) {
// update the textarea
$scope.result = data.result;
$scope.loading = false;
});
performSearch();
}
};
@ -950,6 +952,8 @@
};
$scope.$watch('keywords', function (tmpStr) {
updateCurrentPage(-1);
updateTotalPage(-1);
if (!tmpStr || tmpStr.length === 0){
$scope.result = [];
return 0;
@ -958,16 +962,63 @@
// go ahead and retrieve the data
if (tmpStr === $scope.keywords)
{
$scope.loading = true;
loWeb.get('/search?source=' + getSourceName($scope.tab) + '&keywords=' + $scope.keywords).success(function(data) {
// update the textarea
$scope.result = data.result;
$scope.loading = false;
});
performSearch();
}
});
function performSearch(){
loWeb.get('/search?source=' + getSourceName($scope.tab) + '&keywords=' + $scope.keywords+'&curpage='+ $scope.curpage).success(function(data) {
// update the textarea
$scope.result = data.result;
updateTotalPage(data.total);
$scope.loading = false;
});
}
function updateCurrentPage(cp){
if(cp === -1){ // when search words changes,pagenums should be reset.
$scope.curpagelog = [1,1,1];
$scope.curpage = 1;
}
else if(cp >= 0)
$scope.curpage = $scope.curpagelog[$scope.tab] = cp;
else // only tab changed
$scope.curpage = $scope.curpagelog[$scope.tab];
}
function updateTotalPage(totalItem){
if(totalItem === -1) {
$scope.totalpagelog = [1,1,1];
$scope.totalpage = 1;
}
else if(totalItem >=0)
$scope.totalpage=$scope.totalpagelog[$scope.tab] = Math.ceil(totalItem/20);
else
//just switch tab
$scope.totalpage=$scope.totalpagelog[$scope.tab];
}
$scope.nextPage = function(){
$scope.curpage = $scope.curpagelog[$scope.tab] += 1;
performSearch();
}
$scope.previousPage = function(){
$scope.curpage = $scope.curpagelog[$scope.tab] -= 1;
performSearch();
}
}]);
app.directive('pagination',function(){
return {
restrict: "EA",
replace:false,
template: ' <button class="btn btn-sm btn-pagination" ng-click="previousPage()" ng-disabled="curpage==1"> 上一页</button>\
<label> {{curpage}}/{{totalpage}} </label>\
<button class="btn btn-sm btn-pagination" ng-click="nextPage()" ng-disabled="curpage==totalpage"> 下一页</button>',
}
});
app.directive('errSrc', function() {
// http://stackoverflow.com/questions/16310298/if-a-ngsrc-path-resolves-to-a-404-is-there-a-way-to-fallback-to-a-default
return {

View File

@ -231,9 +231,10 @@ var netease = (function() {
// use chrome extension to modify referer.
var target_url = 'http://music.163.com/api/search/pc';
var keyword = getParameterByName('keywords', url);
var curpage = getParameterByName('curpage', url);
var req_data = {
's': keyword,
'offset': 0,
'offset': 20*(curpage-1),
'limit': 20,
'type': 1
};
@ -269,7 +270,7 @@ var netease = (function() {
}
tracks.push(default_track);
});
return fn({"result":tracks});
return fn({"result":tracks,"total":data.result.songCount});
});
}
};

View File

@ -205,11 +205,12 @@ var qq = (function() {
return {
success: function(fn) {
var keyword = getParameterByName('keywords', url);
var curpage = getParameterByName('curpage', url);
var target_url = 'http://i.y.qq.com/s.music/fcgi-bin/search_for_qq_cp?' +
'g_tk=938407465&uin=0&format=jsonp&inCharset=utf-8' +
'&outCharset=utf-8&notice=0&platform=h5&needNewCode=1' +
'&w=' + keyword + '&zhidaqu=1&catZhida=1' +
'&t=0&flag=1&ie=utf-8&sem=1&aggr=0&perpage=20&n=20&p=1' +
'&t=0&flag=1&ie=utf-8&sem=1&aggr=0&perpage=20&n=20&p=' + curpage +
'&remoteplace=txt.mqq.all&_=1459991037831&jsonpCallback=jsonp4';
hm({
url:target_url,
@ -224,7 +225,7 @@ var qq = (function() {
var track = qq_convert_song(item);
tracks.push(track);
});
return fn({"result":tracks});
return fn({"result":tracks,"total":data.data.song.totalnum});
});
}
};

View File

@ -139,7 +139,8 @@ var xiami = (function() {
return {
success: function(fn) {
var keyword = getParameterByName('keywords', url);
var target_url = 'http://api.xiami.com/web?v=2.0&app_key=1&key=' + keyword + '&page=1&limit=50&callback=jsonp154&r=search/songs';
var curpage = getParameterByName('curpage', url);
var target_url = 'http://api.xiami.com/web?v=2.0&app_key=1&key=' + keyword + '&page='+ curpage +'&limit=20&callback=jsonp154&r=search/songs';
hm({
url:target_url,
method: 'GET',
@ -153,7 +154,7 @@ var xiami = (function() {
var track = xm_convert_song(item, 'artist_name');
tracks.push(track);
});
return fn({"result":tracks});
return fn({"result":tracks,"total":data.data.total});
});
}
};

View File

@ -232,11 +232,11 @@
<ul class="detail-songlist">
<li ng-repeat="song in result" ng-class-odd="'odd'" ng-class-even="'even'" ng-mouseenter="options=true" ng-mouseleave="options=false">
<div class="col2">
<a ng-if="song.disabled" class="disabled" ng-click="copyrightNotice()">{{ song.title }}</a>
<a ng-if="!song.disabled" add-and-play="song">{{ song.title }}</a>
<a ng-if="song.disabled" class="disabled" ng-click="copyrightNotice()">{{ song.title |limitTo:30}}</a>
<a ng-if="!song.disabled" add-and-play="song">{{ song.title |limitTo:30}}</a>
</div>
<div class="col1 detail-artist"><a ng-click="showPlaylist(song.artist_id)">{{ song.artist }}</a></div>
<div class="col2"><a ng-click="showPlaylist(song.album_id)">{{ song.album }}</a></div>
<div class="col1 detail-artist"><a ng-click="showPlaylist(song.artist_id)">{{ song.artist |limitTo:20}}</a></div>
<div class="col2"><a ng-click="showPlaylist(song.album_id)">{{ song.album |limitTo:30}}</a></div>
<div class="detail-tools">
<a title="添加到当前播放" class="detail-add-button" add-without-play="song" ng-show="options"></a>
@ -245,6 +245,7 @@
</div>
</li>
</ul>
<pagination ng-show= "totalpage>1"></pagination>
</div>
</div>
</div>