Detailed explanation of angularjs combined with pagination plug in to realize paging function

angularjs and pagination plug-ins can perfectly realize the front-end paging, filtering, search and other functions, provided that there is of course a background development cooperation. Today we only talk about the front-end implementation:

1. Introduce pagination plug-in, and load pagination plug-in before angularjs is introduced;

2. When defining controller, it is necessary to inject pagination plug-in;

3. The front-end principle of paging basically needs a default asynchronous request. When you click paging, you request data again and send the current page number to the background. If you have the function of searching data or filtering data, you need to bring the search parameters defined together with the background development when sending the request;

4. There is not much nonsense, code and basic template:

var url = ' Request path ';
  
  $http({
    method:"post",
    url:url
  }).success(function(_data) {
    $scope.contentlist = _.data.items;// Data list 
        $scope.pageparameters = _data.data;
    $scope.Searchparameters = {
        // Define your search parameters 
    }
    //  Initialize paging data 
    var pagination;
    $scope.paginationInt = function($data) {
      pagination = $scope.pagination = Pagination.create({
        
        itemsCount: $data.total_items, //  Total 
        itemsPerPage: $data.epage, //  Number of strips per page 
        currentPage: $data.page //  Current page number 
      });
      
      //  Paging operation 
      pagination.onChange = function(page) {
        $scope.page(page);
      };
    };
    $scope.paginationInt($scope.pageparameters);
    //  Filter the parameters passed when filtering the list page 
    $scope.borrowSearch = function(type, val) {
      $scope.borrowData[type] = val;
      $scope.page(1);// Every search starts from the first 1 Page start 
    };
    //  Sort 
    $scope.SearchTab = {};
    $scope.SearchStatus = true;
    $scope.current = {
      // Your parameters 
    };
    //  Page number jump operation 
    $scope.skipInput = function(page, endPage) {
      if (!isNaN(page)) {
        var page = parseInt(page, 20),
          endPage = parseInt(endPage, 20);
        if (page > endPage || page <= 0) {
          $scope.skipError = true;
        } else {
          $scope.skipError = false;
        }
      } else {
        $scope.skipError = true;
      }
    };

    $scope.page = function(page) {
      $scope.Searchparameters.current_page = page;

//  Paging method  
$http({ url:url, method:"post", params:$scope.Searchparameters }).success(function(data) { $scope.contentlist = data.items; }); }; });

HTML method is skipped here, and small partners who don't understand can send private letters!