How to implement paging and search functions in angularjs
This article mainly introduces the paging and search functions of angularjs. It has certain reference value. Interested friends can refer to it.
The example of this article shares with you the paging and search display of angularjs. The specific code is for your reference. The specific content is as follows
Without further ado, here is 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>{{item.c}}</td>
</tr>
</tbody>
</table>
<p class="am-cf">
共 {{dataNum}} 条记录/当前第 {{currentPage+1}} 页 共 {{pages}} 页
<p 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>
</p>
</p>
<script src="plugins/angularjs/angular.min.js" type="text/javascript"></script>
</body>
</html>javascript
<script>
var app = angular.module("myApp", []);
app.controller("mainController", function ($scope, $http) {
//测试数据
var $data = {"fs":[{"c":"张一"},{"c":"张二"},{"c":"张三"},{"c":"张四"},{"c":"李一"},{"c":"李二"},{"c":"李三"},{"c":"李四"},{"c":"王一"},{"c":"王二"},{"c":"王三"},{"c":"王四"}]};
$scope.currentPage = 0;//设置当前页是 0
$scope.listsPerPage = 3;//设置每页显示3个
//上一页
$scope.prevPage = function(){
if($scope.currentPage > 0){
$scope.currentPage--;
}
}
//下一页
$scope.nextPage = function(){
if ($scope.currentPage < $scope.pages-1){
$scope.currentPage++;
}
}
//监听搜索条件
$scope.$watch('search.c', function(){
$scope.currentPage = 0;
searchResult();
});
//监听翻页
$scope.$watch('currentPage', function(){
searchResult();
});
//搜索或翻页结果
function searchResult(){
var out = [];
if($scope.search){
angular.forEach($data.fs,function(k,v){
if(k.c.indexOf($scope.search.c)>-1){
out.push(k);
}
});
}
else{
out = $data.fs;
}
$scope.houses = out.slice($scope.currentPage*$scope.listsPerPage);
$scope.dataNum = out.length;
$scope.pages = Math.ceil($scope.dataNum/$scope.listsPerPage);
}
});
</script>The above is what I compiled for everyone. I hope it will be useful to you in the future. Everyone is helpful.
Related articles:
How to use babel installation and configuration tutorial
How to configure the babel configuration file in vue-cli
Use node.js to implement Douyin’s automatic red envelope grabbing function
The above is the detailed content of How to implement paging and search functions in angularjs. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to remove news and trending content from Windows 11 Search
Oct 16, 2023 pm 08:13 PM
When you click the search field in Windows 11, the search interface automatically expands. It displays a list of recent programs on the left and web content on the right. Microsoft displays news and trending content there. Today's check promotes Bing's new DALL-E3 image generation feature, the "Chat Dragons with Bing" offer, more information about dragons, top news from the Web section, game recommendations, and the Trending Search section. The entire list of items is independent of your activity on your computer. While some users may appreciate the ability to view news, all of this is abundantly available elsewhere. Others may directly or indirectly classify it as promotion or even advertising. Microsoft uses interfaces to promote its own content,
How to search for users in Xianyu
Feb 24, 2024 am 11:25 AM
How does Xianyu search for users? In the software Xianyu, we can directly find the users we want to communicate with in the software. But I don’t know how to search for users. Just view it among the users after searching. Next is the introduction that the editor brings to users about how to search for users. If you are interested, come and take a look! How to search for users in Xianyu? Answer: View details among the searched users. Introduction: 1. Enter the software and click on the search box. 2. Enter the user name and click Search. 3. Select [User] under the search box to find the corresponding user.
PHP development: How to implement table data sorting and paging functions
Sep 20, 2023 am 11:28 AM
PHP development: How to implement table data sorting and paging functions In web development, processing large amounts of data is a common task. For tables that need to display a large amount of data, it is usually necessary to implement data sorting and paging functions to provide a good user experience and optimize system performance. This article will introduce how to use PHP to implement the sorting and paging functions of table data, and give specific code examples. The sorting function implements the sorting function in the table, allowing users to sort in ascending or descending order according to different fields. The following is an implementation form
How to use Baidu advanced search
Feb 22, 2024 am 11:09 AM
How to use Baidu Advanced Search Baidu search engine is currently one of the most commonly used search engines in China. It provides a wealth of search functions, one of which is advanced search. Advanced search can help users search for the information they need more accurately and improve search efficiency. So, how to use Baidu advanced search? The first step is to open the Baidu search engine homepage. First, we need to open Baidu’s official website, which is www.baidu.com. This is the entrance to Baidu search. In the second step, click the Advanced Search button. On the right side of the Baidu search box, there is
WPS table cannot find the data you are searching for, please check the search option location
Mar 19, 2024 pm 10:13 PM
In the era dominated by intelligence, office software has also become popular, and Wps forms are adopted by the majority of office workers due to their flexibility. At work, we are required not only to learn simple form making and text entry, but also to master more operational skills in order to complete the tasks in actual work. Reports with data and using forms are more convenient, clear and accurate. The lesson we bring to you today is: The WPS table cannot find the data you are searching for. Why please check the search option location? 1. First select the Excel table and double-click to open it. Then in this interface, select all cells. 2. Then in this interface, click the "Edit" option in "File" in the top toolbar. 3. Secondly, in this interface, click "
How to search for stores on mobile Taobao How to search for store names
Mar 13, 2024 am 11:00 AM
The mobile Taobao app software provides a lot of good products. You can buy them anytime and anywhere, and everything is genuine. The price tag of each product is clear. There are no complicated operations at all, making you enjoy more convenient shopping. . You can search and purchase freely as you like. The product sections of different categories are all open. Add your personal delivery address and contact number to facilitate the courier company to contact you, and check the latest logistics trends in real time. Then some new users are using it for the first time. If you don’t know how to search for products, of course you only need to enter keywords in the search bar to find all the product results. You can’t stop shopping freely. Now the editor will provide detailed online methods for mobile Taobao users to search for store names. 1. First open the Taobao app on your mobile phone,
How to use JavaScript to implement table paging function?
Oct 20, 2023 pm 06:19 PM
How to use JavaScript to implement table paging function? With the development of the Internet, more and more websites use tables to display data. In some cases where the amount of data is large, the data needs to be displayed in pages to improve user experience. This article will introduce how to use JavaScript to implement table paging function and provide specific code examples. 1. HTML structure First, we need to prepare an HTML structure to host tables and paging buttons. We can use <tab
How to use hash search algorithm in C++
Sep 19, 2023 pm 02:49 PM
How to use the hash search algorithm in C++ The hash search algorithm is an efficient search and storage technology. It converts keywords into a fixed-length index through a hash function, and then uses this index in the data structure Search. In C++, we can implement hash search algorithms by using hash containers and hash functions from the standard library. This article will introduce how to use the hash search algorithm in C++ and provide specific code examples. Introducing header files and namespaces First, before using the hash search algorithm in C++
