项目中高级查询_分页的一些注意点

1.后台实现
①PageResult类

import lombok.Getter;
import lombok.Setter;
import lombok.ToString;
import java.util.Collections;
import java.util.List;
@Getter
@Setter
@ToString
public class PageResult {
    private List<?> listData;//分页查询的结果集
    private Integer prevPage;//上一页
    private Integer nextPage;//下一页
    private  Integer currentPage;//当前页
    private Integer pageSize;//页面大小
    private Integer totalCount;//总条数
    private Integer beginPage;//首页
    private Integer totalPage;//总页数
    public  static  PageResult EMPTY_RESULT = new PageResult(Collections.emptyList(),1,5,0);
    public PageResult(List<?> listData, Integer currentPage, Integer pageSize, Integer totalCount) {
        this.listData = listData;
        this.currentPage = currentPage;
        this.pageSize = pageSize;
        this.totalCount = totalCount;
        this.beginPage=1;
        this.totalPage=this.totalCount%this.pageSize==0?(this.totalCount/this.pageSize):(this.totalCount/this.pageSize+1);
        this.prevPage=this.currentPage==1?1:this.currentPage-1;
        this.nextPage=this.currentPage==this.totalPage?this.totalPage:this.currentPage+1;
    }
}

②QueryObject类

import lombok.Getter;
import lombok.Setter;
import lombok.ToString;
@Setter@Getter@ToString
public class EmployeeQueryObject extends QueryObject {
    private String keywords;
    private Long deptId;
}

③xxxQueryObject类(自定义的查询条件)

import lombok.Getter;
import lombok.Setter;
import lombok.ToString;
@Setter
@Getter
@ToString
public class QueryObject {
   private Integer currentPage=1;
   private Integer pageSize=5;
   public Integer getBeginIndex(){
       return (currentPage-1)*pageSize;
   }
}

④service实现类中实现高级查询的方法

public PageResult pageQuery(EmployeeQueryObject qo) {
        Long totalCount = empMapper.getTotalCount(qo);
        if(totalCount==0){
            return  PageResult.EMPTY_RESULT;
        }
        List<Employee> listData = empMapper.getListData(qo);
        return new PageResult(listData,qo.getCurrentPage(),qo.getPageSize(),totalCount.intValue());
    }

⑤前端页面–查询条件+按钮

<div id="box_center">
                        姓名/邮箱
                        <s:textfield  class="ui_input_txt02" name="qo.keywords" />
                        所属部门
                        <s:select list="#depts" listKey="id" listValue="name" name="qo.deptId" headerKey="-1" headerValue="--请选择--"/>
                    </div>
                    <div id="box_bottom">
                        <input type="button" value="查询" class="ui_input_btn01 btn_search"/>
                    </div>

⑥分页条

<div class="ui_tb_h30">
                <div class="ui_flt" style="height: 30px; line-height: 30px;">
                    共有
                    <span class="ui_txt_bold04">
                        <s:property value="#result.totalCount"/>
                    </span>
                    条记录，当前第
                    <span class="ui_txt_bold04">
                        <s:property value="#result.currentPage"/>
                        /
                        <s:property value="#result.totalPage"/>
                    </span>
                    页
                </div>
                <div class="ui_frt">
                    <input type="button" value="首页" class="ui_input_btn01 btn_page"
                           data-page="1"/>
                    <input type="button" value="上一页" class="ui_input_btn01 btn_page"
                           data-page="<s:property value="#result.prevPage"/>"/>
                    <input type="button" value="下一页" class="ui_input_btn01 btn_page"
                           data-page="<s:property value="#result.nextPage"/>"/>
                    <input type="button" value="尾页" class="ui_input_btn01 btn_page"
                           data-page="<s:property value="#result.totalPage"/>"/>

                    <select list="{10,20,50}" name="" class="ui_select02">
                        <option>5</option>
                        <option>10</option>
                        <option>20</option>
                    </select>
                    转到第<s:textfield  name="qo.currentPage"  class="ui_input_txt01" />页
                    <input type="submit" class="ui_input_btn01" value="跳转"/>
                </div>
            </div>

⑦相关的js代码

//点击查询时提交表单
    $(".btn_search").click(function(){
       /*//得到表单
        var searchForm = document.getElementById("searchForm");
        //提交表单
        submit(searchForm);*/
       $("#searchForm").submit();
    });
    $(".btn_page").click(function(){
         //获取到当前页并设置到表单
         //var pageNo = $(this).attr("data-page");
        //使用data()方法来获取到data-xxx的值,等同于上面的
         var pageNo = $(this).data("page")||$("input[name='qo.currentPage']").val();
         $("input[name='qo.currentPage']").val(pageNo);
        //提交表单
        $("#searchForm").submit();
    });
    //页面大小的设置
    $("#pageSize").change(function(){
        $("#searchForm").submit();
    });