Mybatis+AngularJS +pagination.js分頁元件實現頁面分頁
阿新 • • 發佈：2018-12-15
前提條件：
搭建好SSM框架，或者其他框架
一、建立分頁結果類
public class PageResult implements Serializable{
private long total;//總記錄數
private List rows;//當前頁結果
//省略getXX、setXX
}二、服務層實現
@Override public PageResult findPage(int pageNum, int pageSize) { PageHelper.startPage(pageNum, pageSize); //使用逆向工程 Page<User> page= (Page<User>) userMapper.selectByExample(null); return new PageResult(page.getTotal(), page.getResult()); }
三、控制層實現
@RequestMapping("/findPage")
@ResponseBody
public PageResult findUserByPage(int page,int rows){
return userService.findPage(page, rows);
}
四、頁面內容
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>使用者管理</title> <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport"> <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css"> <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css"> <link rel="stylesheet" href="../css/style.css"> <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script> <script src="../plugins/bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script> <!-- 分頁元件開始 --> <script src="../plugins/angularjs/pagination.js"></script> <link rel="stylesheet" href="../plugins/angularjs/pagination.css"> <!-- 分頁元件結束 --> <script type="text/javascript"> var app=angular.module('user',['pagination']); app.controller('userController',function($scope,$http){ /*分頁控制元件配置currentPage:當前頁 totalItems :總記錄數 itemsPerPage:每頁記錄數 perPageOptions :分頁選項 onChange:當頁碼變更後自動觸發的方法 */ $scope.paginationConf = { currentPage: 1, totalItems: 10, itemsPerPage: 10, perPageOptions: [10, 20, 30, 40, 50], onChange: function(){ $scope.reloadList(); } }; //重新整理列表 $scope.reloadList=function(){ $scope.search( $scope.paginationConf.currentPage , $scope.paginationConf.itemsPerPage ); } //分頁 $scope.findPage=function(page,size){ $http.get('../brand/findUserByPage?page='+page +'&size='+size).success( function(response){ $scope.list=response.rows;//顯示當前頁資料 $scope.paginationConf.totalItems=response.total;//更新總記錄數 } ); } }); </script> </head> <body class="hold-transition skin-red sidebar-mini" ng-app="user" ng-controller="userController" > <!-- .box-body --> <div class="box-header with-border"> <h3 class="box-title">使用者管理</h3> </div> <div class="box-body"> <!-- 資料表格 --> <div class="table-box"> <!--工具欄--> <div class="pull-left"> <div class="form-group form-inline"> <div class="btn-group"> <button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ng-click="entity={}" ><i class="fa fa-file-o"></i> 新建</button> <button type="button" class="btn btn-default" title="刪除" ng-click="dele()"><i class="fa fa-trash-o" ></i> 刪除</button> <button type="button" class="btn btn-default" title="重新整理" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 重新整理</button> </div> </div> </div> <!--工具欄/--> <!--資料列表--> <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" ng-click="updateSelection($event, entity.id)" ></td> <td>{{entity.id}}</td> <td>{{entity.name}}</td> <td>{{entity.age}}</td> <td class="text-center"> <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" ng-click="findOne(entity.id)" >修改</button> </td> </tr> </tbody> </table> <!--資料列表/--> <tm-pagination conf="paginationConf"></tm-pagination> </div> </div> </body> </html>