Angular简单的例子实现分页和模糊查询

最新推荐文章于 2020-12-21 20:44:29 发布

零落飞花雨

最新推荐文章于 2020-12-21 20:44:29 发布

阅读量466

点赞数 1

分类专栏： angular java 文章标签：简单 java

本文链接：https://blog.csdn.net/qq_42854837/article/details/86550850

版权

java 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

angular

1 篇文章 0 订阅

订阅专栏

首先大家需要准备js和css文件，这里就不多说了
首先在html页面引入javascript标签，虽然少，但这个几个就够用了

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/bootstrap.min.css" />
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/pagination.js"></script>
<link rel="stylesheet" type="text/css" href="js/pagination.css" />

在js脚本里面定义angular模块

var app = angular.module("brand",['pagination']);

这里配置分页的控件

 //分页控件配置 
	    $scope.paginationConf = {
	    		 currentPage: 1,
	    		 totalItems: 10,
	    		 itemsPerPage: 2,
	    		 perPageOptions: [2, 4, 6, 8, 10],
	    		 onChange: function(){
	    		 	$scope.reloadList();//重新加载
	    			// scope.findPage();
	    		 }
	    };

刷新列表：

$scope.reloadList=function(){
			 //console.log(scope.searchEntity.name);
	    	 //切换页码  
	    	$scope.findPage( $scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
	    	  $scope.selectIds = [];
	    }

body里面还要加上angular必要的标签,识别angular

<body ng-app = "brand" ng-controller = "brandController">

这里还要加上分页的标签，重点

<tm-pagination conf="paginationConf" class = "btn"></tm-pagination>

零落飞花雨

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录