Как заставить страницы меняться с помощью нумерации страниц - PullRequest
Новая
       18

Как заставить страницы меняться с помощью нумерации страниц

0 голосов
/ 05 апреля 2019

Я пытаюсь установить нумерацию страниц, чтобы я мог установить лимит строк для отображения на странице вместо 30 строк, отображаемых на 1 странице. Есть 2 проблемы, которые возникают, и я не уверен.

  1. У меня есть строка, отображающая [Previous 1,2,3,4,5,6, Next] под пустой таблицей, которая должна быть заполнена в моем index.html, когда у меня нет .filter в controller.js. Если я добавлю его в строку с отображением [Предыдущая 1,2,3,4,5,6, Следующая] исчезнет, ​​и страница станет пустой.

  2. Если я удаляю «| pagination: (currentPage -1) * pageSize |» в строке tr ng-repeat и удаляю .filter в controller.js, информация из базы данных mongo показывается, но если я выбираю на другой странице данные не меняются.

Я подозреваю, что ошибка связана с моей опцией .filter в controller.js, но я не вижу, где она.

Я попытался настроить .filter в моем контроллере, чтобы сделать нумерацию страниц, но я не уверен, почему он не работает.

index.html 

<table id= "myTable" class="table">
  <thead>
    <tr>
      <th>Stops</th>         
      <th>Reviews</th>
      <th>Latitude</th>
      <th>Longitude</th>
      <th>Action</th>
      <th>&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input class="form-control" ng-model="luas_stops_english.Stops"></td>
      <td><input class="form-control" ng-model="luas_stops_english.Reviews"></td>
      <td><input class="form-control" ng-model="luas_stops_english.Latitude"></td>
      <td><input class="form-control" ng-model="luas_stops_english.Longitude"></td>
      <td><button class="btn btn-primary" ng-click="addStop()">Add Stop</button></td>
      <td><button class="btn btn-info" ng-click="update()">Update</button>&nbsp;&nbsp;<button class="btn btn-info" ng-click="deselect()">Clear</button></td>
    </tr>                                           <!--pagination: (currentPage -1) * pageSize |  NOT WORKING-->
    <tr ng-repeat="luas_stops_english in luaslist | pagination: (currentPage -1) * pageSize | limitTo: pageSize">  
      <td>{{luas_stops_english.Stops}}</td>
      <td>{{luas_stops_english.Reviews}}</td>
      <td>{{luas_stops_english.Latitude}}</td>
      <td>{{luas_stops_english.Longitude}}</td>
      <td><button class="btn btn-danger" ng-click="remove(luas_stops_english._id)">Remove</button></td>
      <td><button class="btn btn-warning" ng-click="edit(luas_stops_english._id)">Edit</button></td>
    </tr>
  </tbody>
</table>

<ul uib-pagination total-items="luaslist.length" itesm-per-page="pageSize" ng-model="currentPage" ></ul>

controller.js 

var refresh = function() {
$http.get('/luaslist').success(function(response) {
console.log("Data Requested");
$scope.luaslist = response;
$scope.luas_stops_english = "";
});
};



.filter('pagination', function()   {
return function(luaslist, start) {
  return luaslist.slice(start);
}

});
...