從Nodejs應用程序分頁AngularJS/JavaScript

Question

我想實現我的網站中最簡單的分頁。我不知道從哪裏開始。我是Web開發的初學者。

這是我爲我的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個用戶，我想添加儘可能簡單的分頁。鋤頭我能做到嗎？

Answer 1

您的後端需要能夠處理兩個參數。限制和跳過。限制是您要獲取的記錄數，skip是您將省略的記錄數。

所以，你需要的東西是這樣的：

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

如果頁面是1，你會忽略0的記錄。如果頁面爲2，則將省略50 ...等等。

您需要將此與後端正確的查詢結合起來，再加上@GillesC提到的，請查看Angular的分頁指令。 http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs