2016-12-01 90 views
0

我想实现我的网站中最简单的分页。我不知道从哪里开始。我是Web开发的初学者。从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

您的后端需要能够处理两个参数。限制和跳过。限制是您要获取的记录数,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