2016-12-01 6 views
0

私のウェブサイトで最も簡単なページ設定を実装しようとしています。私はどこから始めるべきかわかりません。私はウェブ開発の初心者です。ここでNodejsアプリケーションからAngularJS/JavaScriptのページ分割

は私のindex.htmlのために私のコードです:ここでは

<div ng-controller="searchCtrl"> 
<h2 id="zoekTable">Zoeken</h2> 
<form> 
    <table class="table"> 
     <tr> 
      <td>&nbsp;</td> 
      <td><button type="submit" class="btn btn-edit" ng-click="searchSystem()">Zoek</button> <button type="button" class="btn" ng-click="displayAllUsers()">Toon alle gebruikers</button></td> 
     </tr> 
    </table> 
</form> 

<h2>Gebruikers</h2> 
<table class="table" id="tableResults"> 
    <thead> 
     <tr> 
      <td>Gebruikersnaam</td> 
      <td>Volledige naam</td> 
      <td>Woonplaats</td> 
      <td>Bezit rijbewijs</td> 
      <td>Bekijk CV</td> 
     </tr> 
    </thead> 
    <tr ng-if="results.length === 0"> 
     <td>Geen.</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr ng-if="results.length !== 0" ng-repeat="result in results"> 
     <td>{{result.gebruikersnaam}}</td> 
     <td>{{result.naam}}</td> 
     <td>{{result.woonplaats}}</td> 
     <td>{{result.rijbewijs==1?"Ja":"Nee"}}</td> 
     <td><button ng-click="viewCV(result.gebruikersnaam)">Bekijk CV</button></td> 
    </tr> 
</table> 
</div> 

は私のAngularJS側のための私のコードです:

app.controller('searchCtrl', function ($scope, $http, $location) { 
$scope.displayAllUsers = function() { 
    $http.get("/gebruikers") 
      .success(function (users) { 
       success2("Gebruikers gevonden!", "zoekTable"); 
       $scope.results = users; 
      }) 
      .error(function (err) { 
       alert(err); 
       clearResults(); 
      }); 
}; 

    function clearResults() { 
     $scope.results = ""; 
     $scope.results.length = 0; 
    } 
}); 

そして最後に、私のNode.jsコード:

app.get("/gebruikers", function (req, res) { 
var rijen; 
l("Bezig met ophalen van gebruikers..."); 
connection.query("SELECT * FROM gebruikers INNER JOIN personalia ON gebruikers.gebruikersnaam = personalia.gebruikersnaam WHERE done='1';", function (err, rows) { 
    if (err) { 
     l("ERROR: " + err); 
     res.sendStatus(500); 
    } else { 
     if (rows.length >= 1) { 
      rijen = rows; 
      l("Gebruikers gevonden!"); 
      res.status(200).send(rows); 
     } else { 
      l("Geen gebruikers gevonden!"); 
      res.status(404).send("!Geen gebruikers gevonden!"); 
     } 
    } 
}); 
}); 

データベースから1000人のユーザーがいる可能性があります。できるだけ簡単にページネーションを追加したいと考えています。ええ、私はそれをすることができますか?

+1

[読む](http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs) – GillesC

答えて

0

バックエンドは2つのパラメータを処理できる必要があります。制限とスキップ制限はフェッチするレコードの数です。省略するレコードの数はスキップします。ページが1である

$scope.page = function(_page) { 
    var query = { 
     skip: 50 * (_page - 1), 
     limit: 50 
    }; 
} 

場合は0、レコードを省略します:

だからあなたは、このようなものが必要。ページが2の場合、50を省略します。

これをバックエンドの適切なクエリに組み合わせる必要があります。また、前述の@GillesCと同様に、Angularのページ区切りディレクティブをチェックしてください。 http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs