Question

我做了下一页功能。我需要一个下一个设置功能，这意味着如果它将显示页数，那么我将点击下一组，将显示另一个设置分页列表（6-10）。我再次单击下一个设置按钮，分页将显示另一组（11-15）。你检查一下json文件。

<div class="table-list">
  <table width="100%">
    <tr>
      <th width="25%">Title</th>
      <th width="20%">Tracking ID</th>
      <th width="25%">Company name</th>
      <th width="10%">Action</th>
      <th width="15%">Status</th>
      <th width="15%">Remove</th>
    </tr>

    <tr ng-repeat="offer in offers | filter:{offCompanyName:title} | mySlice:start:end">
      <td>{{offer.offTitle}}</td>
      <td>{{offer.offTrackingId}}</td>
      <td>{{offer.offCompanyName}}</td>
      <td><a href="#/offers-edit"><strong>Edit</strong></a></td>
      <td>{{offer.offerStatus}}</td>
      <td><span class="btn btn-small">Delete</span></td>
    </tr>
  </table>
  <div class="pagination">
    <button ng-disabled="start == 0" ng-click="prevPage()">Prev</button>
    <button ng-click="prevSet();"> &lt; </button>
    <ul>
      <li ng-repeat="i in getNumber(myNumber) track by $index" >
        <button ng-click="loadFromMenu($index+1)" ng-class="pageList">
          {{$index+1}}
        </button>
      </li>
    </ul>
        <button ng-click="nextSet();"> &gt; </button>
    <button ng-disabled="start == lastStart" ng-click="nextPage()">Next</button>
  </div>

var itemLength = 10;
$scope.start = 0;
$scope.end = itemLength;
$scope.limitM = 2;

$http({
    method:"GET",
    url:"url",
    dataType : "json",
    contentType: "application/json; charset=utf-8",
    headers:{
        "authorization":"something"
    }
}).then(function successCallback(data) {
    $scope.limitM = 2;
    $scope.offers = data.data.offers;
    var i, d = new Date(), fullList = $scope.offers.length;
    angular.forEach($scope.offers, function(obj, index){
        var offerEndDate = $scope.offers[index].offEndTime;

        if(d.getTime() >= offerEndDate) {
            obj.offerStatus = "Inactive"
        } else {
            obj.offerStatus = "Active"
        }
    }); 

    $scope.myNumber = Math.ceil(fullList / itemLength);
    $scope.lastStart = Math.floor(fullList / itemLength)+'0';
    $scope.getNumber = function(num) {
        return new Array(num);  
    }

    $('.pagination li').on('click', function(){
        if(!$(this).hasClass('active')) {
            $('.pagination li').removeClass();
            $(this).addClass('active')
        } else {
            $('.pagination li').removeClass();
        }
    });
});

$scope.loadFromMenu = function(index) {
    $scope.start = (index-1)*itemLength;
    $scope.end = $scope.start+itemLength;
    console.log($scope.start, $scope.end);  
    //alert($scope.start)
}

$scope.nextPage = function() {
    $scope.start = $scope.end;
    $scope.end += itemLength;
}

[
  {
    "offTitle":"Free voucher", 
    "offTrackingId": "123456", 
    "offCompanyName": "Motorola", 
    "offerStatus": "active"
  },
  {
    "offTitle":"Free voucher", 
    "offTrackingId": "123456", 
    "offCompanyName": "Motorola", 
    "offerStatus": "active"
  },
  {
    "offTitle":"Free voucher", 
    "offTrackingId": "123456", 
    "offCompanyName": "Motorola", 
    "offerStatus": "active"
  },
  {
    "offTitle":"Free voucher", 
    "offTrackingId": "123456", 
    "offCompanyName": "Motorola", 
    "offerStatus": "active"
  }
]

分页angularJs（手动）

0 个答案: