AngularJS分頁外掛的使用
阿新 • • 發佈：2018-12-18
最終效果：
先查全部
1.後端
我們需要建立一個實體類，PageResult.java（加上get,set方法和構造方法，實現序列化）
定義 總頁數和行數
package entity; import java.io.Serializable; import java.util.List; /** * 分頁總結果，總頁數和行數 * @author zly * */ public class PageResult implements Serializable { private long total; private List rows; public PageResult(long total, List rows) { super(); this.total = total; this.rows = rows; } public long getTotal() { return total; } public void setTotal(long total) { this.total = total; } public List getRows() { return rows; } public void setRows(List rows) { this.rows = rows; } }
通過controller,service,serviceimpl查詢到所有資料後，最後通過alibaba的fastjson返回的是json資料，格式如下：
[{
"firstChar": "L",
"id": 1,
"name": "聯想"
}, {
"firstChar": "Y",
"id": 25,
"name": "優衣庫"
}]
2.前臺顯示
前臺展示需要寫angularjs指令，主要是在body標籤裡寫，然後和script裡的而對應
ng-app=“pinyougou”----可以寫成專案名稱
ng-controller=“brandController”----可以寫成模組名稱
ng-init=“findAll()”----作用是隨頁面載入
ng-repeat=“entity in list”----遍歷，相當於jstl表示式中的<for:each>
ng-click=“findPage()”----事件，相當於js裡的onclick
js部分：
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script> <script type="text/javascript"> var app = angular.module('pinyougou', [ '' ]); app.controller('brandController', function($scope, $http) { //查詢所有的品牌 $scope.findAll = function() { $http.get('../brand/findAll.do').success(function(response) { $scope.list = response; }); } }); </script>
body部分：
<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou"
ng-controller="brandController" ng-init="findAll()">
<table id="dataList"
class="table table-bordered table-striped table-hover dataTable">
<thead>
<tr>
<th class="" style="padding-right: 0px"><input id="selall"
type="checkbox" class="icheckbox_square-blue"></th>
<th class="sorting_asc">品牌ID</th>
<th class="sorting">品牌名稱</th>
<th class="sorting">品牌首字母</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="entity in list">
<td><input type="checkbox"></td>
<td>{{entity.id}}</td>
<td>{{entity.name}}</td>
<td>{{entity.firstChar}}</td>
<td class="text-center">
<button type="button" class="btn bg-olive btn-xs"
data-toggle="modal" data-target="#editModal">修改</button>
</td>
</tr>
</tbody>
</table>
</body>
後處理分頁
1.後端
通過傳（int pageNum, int pageSize）兩個引數（當前第幾頁，每個個數），通過方法進介面，再進實現類，通過分頁外掛，得到想要的分頁資料。這裡僅貼出實現類serviceimpl的程式碼：
package com.pinyougou.sellergoods.service.impl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import com.alibaba.dubbo.config.annotation.Service;
import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;
import com.pinyougou.mapper.TbBrandMapper;
import com.pinyougou.pojo.TbBrand;
import com.pinyougou.sellergoods.service.BrandService;
import entity.PageResult;
@Service
public class BrandServiceImpl implements BrandService {
@Autowired
private TbBrandMapper brandMapper;
//查詢全部品牌
@Override
public List<TbBrand> findAll() {
return brandMapper.selectByExample(null);
}
//分頁查詢
@Override
public PageResult findPage(int pageNum, int pageSize) {
//mybatis的分頁外掛
PageHelper.startPage(pageNum, pageSize);
//查資料，返回成Page，強轉一下
Page<TbBrand> page = (Page<TbBrand>) brandMapper.selectByExample(null);
//返回值
return new PageResult(page.getTotal(), page.getResult());
}
}
2.前臺部分
js部分
先引入angularjs的分頁外掛
外掛下載:https://download.csdn.net/download/qq_37796017/10782452
<!-- 分頁元件開始 -->
<script type="text/javascript" src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<!-- 分頁元件結束 -->
<script type="text/javascript">
var app = angular.module('pinyougou', [ 'pagination' ]);
app.controller('brandController', function($scope, $http) {
//查詢所有的品牌
$scope.findAll = function() {
$http.get('../brand/findAll.do').success(function(response) {
$scope.list = response;
});
}
//初始化和點選時呼叫重新整理列表
$scope.paginationConf = {
currentPage : 1,//當前頁
totalItems : 10,//總數
itemsPerPage : 10,//每頁個數
perPageOptions : [ 10, 20, 30, 40, 50 ],//分頁選項
onChange : function() {//當更改頁碼時，自動觸發事件
$scope.reloadlist();
}
};
//重新整理列表
$scope.reloadlist = function() {
$scope.findPage($scope.paginationConf.currentPage,
$scope.paginationConf.itemsPerPage);
}
//分頁
$scope.findPage = function(pageNum, pageSize) {
$http.get(
'../brand/findPage.do?pageNum=' + pageNum + '&pageSize='
+ pageSize + '').success(function(response) {
$scope.list = response.rows;//顯示當前頁資料
$scope.paginationConf.totalItems = response.total;//更新總記錄數
});
}
});
</script>
body部分
1.在table下加上，用來呼叫和顯示分頁
<tm-pagination conf="paginationConf"></tm-pagination>
2.把body標籤裡的 ng-init=“findAll()” 去掉