SoFunction
Updated on 2025-04-04

angularjs implements pagination and search functions

The examples in this article share with you the specific code for angularjs to implement pagination and search display for your reference. The specific content is as follows

Without further ado, please add the code

<html class="no-js" ng-app="myApp"> 
<body ng-controller="mainController"> 
<table class="am-table am-table-striped am-table-hover table-main"> 
<thead> 
<tr> 
<th>name</th> 
</tr> 
</thead> 
<tbody> 
<tr ng-repeat="item in houses | limitTo:listsPerPage"> 
<td>{{}}</td> 
</tr> 
</tbody> 
</table> 
<div class="am-cf"> 
common {{dataNum}} Record/Current number {{currentPage+1}} Page common {{pages}} Page 
<div class="am-fr"> 
<ul class="am-pagination"> 
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" ng-click="prevPage()">«</a></li> 
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" ng-click="nextPage()">»</a></li> 
</ul> 
</div> 
</div> 
<script src="plugins/angularjs/" type="text/javascript"></script> 
</body> 
</html> 

javascript

<script> 
var app = ("myApp", []); 
("mainController", function ($scope, $http) { 
  //Test data  var $data = {"fs":[{"c":"Zhang Yi"},{"c":"Zhang Er"},{"c":"Zhang San"},{"c":"Zhang Si"},{"c":"Li Yi"},{"c":"Li Er"},{"c":"Li San"},{"c":"Li Si"},{"c":"Wang Yi"},{"c":"Wang Er"},{"c":"Wang San"},{"c":"Wang Si"}]}; 
  $ = 0;//Set the current page is 0  $ = 3;//Set 3 displays per page  //Previous page  $ = function(){ 
    if($ > 0){ 
      $--; 
    } 
  } 
  //Next page  $ = function(){ 
    if ($ < $-1){ 
      $++; 
    } 
  } 
  // Listen to search criteria  $scope.$watch('', function(){ 
    $ = 0; 
    searchResult(); 
  }); 
  // Listen to page turn  $scope.$watch('currentPage', function(){ 
    searchResult(); 
  }); 
  //Search or page turn results  function searchResult(){ 
    var out = []; 
    if($){ 
      ($,function(k,v){ 
        if(($)>-1){ 
          (k); 
        } 
      }); 
    } 
    else{ 
      out = $; 
    } 
    $ = ($*$); 
    $ = ; 
    $ = ($/$); 
  } 
}); 
 
</script> 

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.