关于分页功能的实现

布满荆棘的人生 2022-02-26 06:34 367阅读 0赞

## 需求：指定每页需要显示多少条数据库的信息。 ##

## 所用技术：Angular.js + Ajax + Hibernate。 ##

**一、创建一个工具类：Page**\*\*。\*\*里面有五个参数，分别是：  
pageNow当前页数，pageSize每页显示记录的条数、totalCount总记录数、totalPageCount总页数、url跳转。  
![在这里插入图片描述][20190329102133711.png]  
创建当前类的构造方法传入总记录数和总页数。  
![在这里插入图片描述][20190329102230890.png]  
取得选择记录的初始位置=pageNow当前页数 -1 \* pageSize每页记录数。  
![在这里插入图片描述][20190329102347449.png]  
取得总页数 = 总记录数 / 每页记录数。  
![在这里插入图片描述][20190329110855676.png]  
判断当前页是否是第一页  
![在这里插入图片描述][20190329110920579.png]  
判断是否有首页  
![在这里插入图片描述][20190329110941274.png]  
判断是否有下一页  
![在这里插入图片描述][20190329111000349.png]  
判断是否有尾页  
![在这里插入图片描述][20190329111022268.png]  
**二、在Dao数据层创建查询数据库原始状态的方法和查询数据库总条数的方法。**  
map用来把参数传到数据层，做查询数据条件使用，并需要加入page参数。  
![在这里插入图片描述][2019032911120151.png]  
**三、在Dao数据层接口的实现类DaoImpl中继承BaseDaoImpl类(Hibernate框架分页插件的一个功能类)**，  
并实现`getStoreStatusRowData(Map<String,Object> map,Page page); -->用来获取数据`  
和`getStoreStatusRowDataCount(Map<String,Object> mapCount)方法` `-->用来获取数据条数` 。

在getStoreStatusRowData方法中：  
里面分别放入具体的sql查询语句，并且使用hibernate的Query类和相关方法进行编写逻辑对sql进行处理，  
//判断page不为空，

if (page != null) {
                query.setFirstResult(page.getStartPos());
                query.setMaxResults(page.getPageSize());
            }
    return query.list();

在getStoreStatusRowDataCount方法中：  
首先将mapCount参数通过Json工具类转为String类型，  
写入详细sql查询数据总条数语句，

select count(*) count from.......

并取得数据库中需要用于页面显示的字段信息的值  
//得到sql查询数据和数据的总条数后，将int基本类型转为它的封装类类型Integer

Query query  = getSessions().createSQLQuery(sql).addScalar("count", Constant.INTEGER);

//返回值从List集合类型转为int类型并得到集合中的第一个值

return (int)query.list().get(0);

**四、在Service业务层中创建与Dao数据层一致的两个方法：**  
![在这里插入图片描述][20190329111640617.png]  
**五、在Service接口的实现类ServiceImpl中实现Service接口：**  
并使用@Service注解，来表示当前类属于service层，  
使用@RequestMapping(value="")给当前类制定一个外来资源进行访问的名称，  
使用@AutoWired进行自动装配  
创建dao数据层的变量

@Override
        public List<Object[]> getStoreStatusRowData(Map<String, Object> map, Page page) {
    //返回的是dao数据层中的方法
            return scheduleDAO.getStoreStatusRowData(map,page);
        }
    @Override
        public int getStoreStatusRowDataCount(Map<String, Object> mapCout) {
    //返回的是dao数据层中的方法
            return scheduleDAO.getStoreStatusRowDataCount(mapCout);
        }

**六、创建一个类，ResponseResult，在里面创建三个参数：**

响应业务状态，
    public int status = 200;
    响应消息，
    public String msg = "操作成功";
    响应数据，
    public Object data = null;

并且生成对应的setter和getter方法

**七、在相应的Controller控制层下，创建方法名为getStoreStatusData，**  
/

/方法参数使用了注解@RequestBody用来接收Json数据，
    public ResponseResult getStoreStatusData(@RequestBody JsonNode jsonNode) {
    //方法返回值类型为ResponseResult，
    //实例化ResponseResult对象(DTO模式)，
    ResponseResult responseResult = new ResponseResult();
    //判断jsonNode参数不为空，
    //然后通过三元运算符得到前台传来的四个参数，并得到它的值，如果没有就为空字符串或者为0：
     String piid = jsonNode.has("pid") ? jsonNode.get("pid").asText() : "";
     String cid = jsonNode.has("cid") ? jsonNode.get("cid").asText() : "";
     String storeName = jsonNode.has("storeName") ? jsonNode.get("storeName").asText() : "";
     String signinState = jsonNode.has("signinState") ? jsonNode.get("signinState").asText() : "";
    //通过三元运算符得到前台传来的pageNow(当前页数)，并得到它的值，如果没有就默认为1，
     int pageNow = jsonNode.has("pageNow") ? jsonNode.get("pageNow").asInt(): 1;
    
    //通过三元运算符得到每页想要显示的数据条数，并得到它的值，如果没有就为0，
    int pageSize = jsonNode.has("pageSize") ? jsonNode.get("pageSize").asInt():0;
    
    //封装参数paramMap，把参数传到数据层，做查询数据条件使用
     Map<String,Object> paramMap = new HashMap<String,Object>();
                paramMap.put("pid",piid);
                paramMap.put("cid",cid);
                paramMap.put("storeName",storeName);
                paramMap.put("signinState",signinState);
    
    //调用service业务层接口中的getStoreStatusRowDataCount方法，将paramMap参数传入,
    //总条数返回值为int
     int count = scheduleService.getStoreStatusRowDataCount(paramMap);
    //给Page类的构造方法的形参赋值:总条数、每页显示的条数、url
     Page page = new Page(count,pageNow,10,"");
    //后台进行分页处理，并将保存数据信息的paramMap和操作分页的参数page传入
     List<Object[]> storeStatusDataList = scheduleService.getStoreStatusRowData(paramMap,page);
    //设置业务响应状态:正常
    responseResult.setStatus(200);
    //设置响应数据
     responseResult.setData(storeStatusDataList);
    //设置响应消息，将sql查出的总条数传入
     responseResult.setMsg(count+"");
    //如果页面响应状态为非正常情况，响应的数据为"参数错误"
    responseResult.setStatus(400);
    responseResult.setMsg("参数错误");
    //返回ResponseResult类型的对象responseResult
    return responseResult

八、**前台jsp页面使用angular插件，参数为数据总条数，一页面上需要显示的数据条数，当前页面数。**  
//pageChange是一个方法，就是用户点击分页按钮时页面需要发生何种变化,由它来完成

**九、在相应的js文件中，angular.js和ajax进行混合使用**

//创建模块依赖数组
    var app = angular.module('app', []);
    //使用controller进行通信，名为storestatusCtrl，作用域为scope和http，
    app.controller('storestatusCtrl', ['$scope', '$http', function ($scope, $http) {
    //将没有某些条件查询不到的信息显示为"暂无数据!!!"
    $scope.nolist = "暂无数据!!!";
    //storeName和signinState为""
    $scope.storeName = "";
    $scope.signinState = "";
    //设置一页面需要显示多少条数据
    $scope.pageSize=10;
    //设置当前页为多少，默认为1
    $scope.pageNow=1;
    //获取文件列表信息，创建函数
     var getList = function () {
    //post后为数据源处，view显示层调controller控制层
    $http.post('/template/appeal/getStoreStatus.smk'{
      //获取后台controller的第一个参数cid的值
      'cid': $("#cid").val(),
      //获取后台controller的第二个参数pid的值
       'pid': $("select[name='piid']").val(),
      //获取后台controller的第三个参数storeName的值
      'storeName': $scope.storeName,
      //获取后台controller的第四个参数signinState的值
       'signinState': $scope.signinState,
      //点击分页查询时，当前页数回归到原始的状态1
       'pageNow':$scope.pageNow
     }, {
      //头信息为xml
       'headers': {
                    'X-Requested-With': 'XMLHttpRequest'
                }
    //获取后台controller响应的数据data
    }).success(function (data) {
     $scope.storeStatusList = data.data;
    //获取后台响应的消息msg，类型为int
     $scope.totalCount = parseInt(data.msg);
    //当响应消息状态非正常时，
     }).error(function (err) {
     msgModal('操作失败!');
         });
    }
    
    //创建操作分页显示的方法pageChange
     $scope.pageChange = function(){
      //当用户点击分页查询按钮的时候使得数据总条数变为0
      $scope.totalCount=0;
     //点击分页查询按钮后，再次重新执行getList方法，重新获得新页面所显示的数据
     getList();
     }
    
     $scope.query = function () {
            getList();
     }
    
    void function main() {
            getList();
        }();

[20190329102133711.png]: /images/20220226/f6f0d7fbb2d84ad286cec5d8f351fe50.png
[20190329102230890.png]: /images/20220226/2b847f9d2079488280414ec427de5dad.png
[20190329102347449.png]: /images/20220226/3e02ce6cfa0d4ec68037aff535de1e25.png
[20190329110855676.png]: /images/20220226/6697a5b586624ac3837fa4e5c54235b6.png
[20190329110920579.png]: /images/20220226/f89ed54d95194b2ba844339ab5da2556.png
[20190329110941274.png]: /images/20220226/e7384aaaa834496ba710d7f12364b15f.png
[20190329111000349.png]: /images/20220226/4298efbe25e24b15a5c183b8eddb14f6.png
[20190329111022268.png]: /images/20220226/423fa5a790d440e886cac50b456efdfa.png
[2019032911120151.png]: /images/20220226/aa85071600c04666bcf4b1a5339e24b2.png
[20190329111640617.png]: /images/20220226/59c903d244684736bd0537805a4634fd.png