左侧固定导航栏的网站,南通启益建设集团有限公司网站,成都网页设计培训班,wordpress漂浮广告插件1.分页查询的底层逻辑
首先根据用户输入的流派#xff0c;进行模糊查询根据查询的数据进行分页需要前端用户提供pageNo(当前页数)和pageSize(每页的数据量)并且要从后端计算count(总数据量)和totalPage(总页数)#xff0c;以及startNum(每页开始的记录)从而将对应的页面数据…1.分页查询的底层逻辑
首先根据用户输入的流派进行模糊查询根据查询的数据进行分页需要前端用户提供pageNo(当前页数)和pageSize(每页的数据量)并且要从后端计算count(总数据量)和totalPage(总页数)以及startNum(每页开始的记录)从而将对应的页面数据展示给用户
2.分页查询的实现
分页查询所需要的所有属性 1.pageNo 当前页码 要查看的页码 前端用户决定 2.pageSize 当前每页的展示数量 前端用户决定或者后台设定好 3.startNum 开始行号 pageNo-1)*pageSize sql语句做分页要查询的条件通过计算得出 4.totalNum 所有页数 count/pageSize 通过计算得出 5.List 查询出的数据 6.totalCount 所有数据量 count(*) 通过查询数据库得出
分页查询的代码实现
首先创建分页的对象Page 为泛型类因为每一个部分都需要实现分页传递给前端进行解读
page实体类
package com.qcby.utils;import java.util.List;/*** 封装前端需要的承载数据以及分页相关的一个实体* 自定义页的类*/
public class PageT {/*** 每页记录数已知*/private Integer pageSize 5;/*** 页码已知*/private Integer pageNo 1;/*** 指定查询条件下的总记录数已知*/private Integer totalCount 0;/*** 指定查询条件下 的总页数*/private Integer totalPage 1;/*** 使用sql查询的时候的开始行号*/private Integer startNum 0;/*** 数据结果集*/private ListT list;public Integer getPageSize() {return pageSize;}public void setPageSize(Integer pageSize) {this.pageSize pageSize;}public Integer getPageNo() {return pageNo;}public void setPageNo(Integer pageNo) {this.pageNo pageNo;}public Integer getTotalCount() {return totalCount;}public void setTotalCount(Integer totalCount) {this.totalCount totalCount;}public Integer getTotalPage() {totalPage totalCount/pageSize;if(totalCount 0 || totalCount%pageSize ! 0){//如果不能整除的话需要取整1totalPage;}return totalPage;}public void setTotalPage(Integer totalPage) {this.totalPage totalPage;}public Integer getStartNum() {return (pageNo -1 )*pageSize;}public void setStartNum(Integer startNum) {this.startNum startNum;}public ListT getList() {return list;}public void setList(ListT list) {this.list list;}
}
需要将page对象传递给前端实现对应的页面渲染 mtype实体类
package com.qcby.model;import java.io.Serializable;public class Mtype implements Serializable {private Integer tid;private String tname;private String tdesc;public Mtype() {}public Mtype(Integer tid, String tname, String tdesc) {this.tid tid;this.tname tname;this.tdesc tdesc;}public Integer getTid() {return tid;}public void setTid(Integer tid) {this.tid tid;}public String getTname() {return tname;}public void setTname(String tname) {this.tname tname null ? null : tname.trim();}public String getTdesc() {return tdesc;}public void setTdesc(String tdesc) {this.tdesc tdesc null ? null : tdesc.trim();}Overridepublic String toString() {return Mtype{ tid tid , tname tname \ , tdesc tdesc \ };}
}
需要创建mtypeQuery实体类将前端的页面数据pageNo等的数据传递给后端进行数据查询
mtypeQuery实体类
package com.qcby.query;import com.qcby.model.Mtype;/**封装query对象的目的是接受前端的请求参数在后端处理业务逻辑*知道用户的分页条件和查询条件* 只作为表现层接收前端参数封装使用*/
public class MtypeQuery extends Mtype{private Integer pageNo;private Integer startNum;private Integer pageSize5;public Integer getPageSize() {return pageSize;}public void setPageSize(Integer pageSize) {this.pageSize pageSize;}public Integer getPageNo() {return pageNo;}public void setPageNo(Integer pageNo) {this.pageNo pageNo;}public Integer getStartNum() {return startNum;}public void setStartNum(Integer startNum) {this.startNum startNum;}}为什么mtype实体类当中没有设置有关页面的数据 因为在用page对象对mtype进行封装的时候页面数据并没有用到前端的数据展示当中而前端需要向后台服务器传递页面数据因此需要再创建一个mtypeQuery实体类进行页面数据的封装 表现层
package com.qcby.controller;import com.qcby.model.Mtype;
import com.qcby.utils.Page;
import com.qcby.query.MtypeQuery;
import com.qcby.service.MtypeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;/*** 流派业务的表现层* 处理前端页面的请求*/
Controller
RequestMapping(/mtype)
public class MtypeController {Autowiredprivate MtypeService mtypeService;/*** 流派的分页条件查询接口* param mq* param model* return*///展示流派信息RequestMapping(/list)public String listType(MtypeQuery mq, Model model){if(mq.getPageNo() null||mq.getPageNo()0){mq.setPageNo(1);}PageMtype page mtypeService.selectObjectByCondition(mq);//把Page对象传递给前端进行解析呈现数据model.addAttribute(page, page);model.addAttribute(mq,mq);return mtype;}}通过model将用户查询到的page传递到前端进行页面渲染
前端用户通过mq将查询条件和分页条件 传递到后端
根据用户的查询条件进行分页的方法selectObjectByCondition需要创建在父接口BaseDao当中再由浮层的实现类BaseServiceImpl实现,因为所有的类都需要实现该分页操作
BaseDao
package com.qcby.dao;import java.util.List;public interface BaseDaoQ, T {/*** 保存数据* param t*/public void insert(T t);/*** 根据主键查询对象* param id* return*/public T selectByPrimaryKey(Integer id);/*** 根据主键删除数据* param id*/public void deleteByPrimaryKey(Integer id);/*** 修改数据* param*/public void updateByPrimaryKeySelective(T t);/*** 查询所有的记录* return*/public ListT selectObjectAll();/*** 根据查询条件来查询数据* param q* return*/public ListT selectObjectByCondition(Q q);/*** 根据查询条件来查询符合条件的记录数* param q* return*/public Integer selectObjectByConditionCount(Q q);
}BaseService
package com.qcby.service;import com.qcby.utils.Page;import java.util.List;public interface BaseServiceQ, T {/*** 保存数据* param t*/public void insert(T t);/*** 根据主键查询对象* param id* return*/public T selectByPrimaryKey(Integer id);/*** 根据主键删除数据* param id*/public void deleteByPrimaryKey(Integer id);/*** 修改数据* param*/public void updateByPrimaryKeySelective(T t);/*** 查询所有的记录* return*/public ListT selectObjectAll();/*** 分页查询* param q* return*/public PageT selectObjectByCondition(Q q);
}BaseServiceImpl实现方法 分页的主要逻辑实现
package com.qcby.service.impl;import com.qcby.dao.BaseDao;
import com.qcby.utils.Page;
import com.qcby.service.BaseService;import java.lang.reflect.Method;
import java.util.List;public class BaseServiceImplQ,T implements BaseServiceQ,T {/*** 可以支持两次注入但是不好* 选择java基础的权限修饰符以及set方法注入的形式改成一次注入*/protected BaseDaoQ, T baseDao;Overridepublic void insert(T t) {baseDao.insert(t);}Overridepublic T selectByPrimaryKey(Integer id) {return baseDao.selectByPrimaryKey(id);}Overridepublic void deleteByPrimaryKey(Integer id) {baseDao.deleteByPrimaryKey(id);}Overridepublic void updateByPrimaryKeySelective(T t) {baseDao.updateByPrimaryKeySelective(t);}Overridepublic ListT selectObjectAll() {return baseDao.selectObjectAll();}//想办法给要返回的page对象所有属性赋值的过程Overridepublic PageT selectObjectByCondition(Q q) {//获得查询对象的类对象//反射Class? extends Object qclass q.getClass();PageT page new PageT();try {//获得getPageNo对象Method method qclass.getMethod(getPageNo, null);//反射调用getPageNo方法Integer pageNo (Integer) method.invoke(q, null);//创建page对象,给返回去的page设置值page.setPageNo(pageNo);//计算开始行号和结束行号Integer startNum page.getStartNum();System.out.println(startNum);//好的查询对象 的设置开始行号和结束行号的方法Method setStartNumMethod qclass.getMethod(setStartNum, new Class[]{Integer.class});setStartNumMethod.invoke(q, startNum);} catch (Exception e) {e.printStackTrace();}//查询结果集ListT list baseDao.selectObjectByCondition(q);//查询指定查询条件下的总记录数Integer count baseDao.selectObjectByConditionCount(q);//把总记录数设置给page对象page.setTotalCount(count);page.setList(list);return page;}
}为什么要通过使用反射 通过反射获取类的类对象可以知道当前的类到底对应的具体分页对象是谁。根据传递的q,通过反射调用方法拿到具体的每一个对象的getPageNo和getPageSize,设置给要返回到前端的page对象 MtypeMapper
package com.qcby.dao;import com.qcby.model.Mtype;
import com.qcby.query.MtypeQuery;public interface MtypeMapper extends BaseDaoMtypeQuery,Mtype{}
MtypeService
package com.qcby.service;import com.qcby.model.Mtype;
import com.qcby.query.MtypeQuery;
import com.qcby.query.MtypeQuery;public interface MtypeService extends BaseServiceMtypeQuery,Mtype{}MtypeServiceImpl
package com.qcby.service.impl;import com.qcby.query.MtypeQuery;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import com.qcby.dao.MtypeMapper;
import com.qcby.model.Mtype;
import com.qcby.query.MtypeQuery;
import com.qcby.service.MtypeService;
Service
public class MtypeServiceImpl extends BaseServiceImplMtypeQuery,Mtype implements MtypeService {private MtypeMapper mtypeMapper;Autowiredpublic void setMtypeMapper(MtypeMapper mtypeMapper) {this.mtypeMapper mtypeMapper;this.baseDaomtypeMapper;}}前端页面 数据展示前端
div classbodytable classtable table-striped table-imagesstylecolor: white;font-size: 14pxtheadtrth classhidden-xs-portrait序号/thth classhidden-xs流派/thth classhidden-xs描述/thth/th/tr/theadtbodyc:forEach items${page.list} varmtype varStatusstatustrtd classhidden-xs-portrait${mtype.tid}/tdtd classhidden-xs-portrait${mtype.tname}/tdtd classhidden-xs ${mtype.tdesc} /tdtdbutton classbtn btn-sm btn-primary typebutton modify tid${mtype.tid} 修改/buttonbutton data-togglebutton classbtn btn-sm btn-warning tid${mtype.tid} 删除/button/td/tr/c:forEach/tbody/tablejsp:include pagepagination.jsp/jsp:include
/div
分页部分前端
% page contentTypetext/html;charsetUTF-8 languagejava %
%include fileheader.jsp%
html
headtitleTitle/title
/head
body
div classclearfix text-right%--隐藏域--%input typehidden idpageNo namepageNo value${mq.pageNo}input typehidden idtotalPage value${page.totalPage}ul classpagination no-marginli idprev classdisableda href#Prev/a/lic:forEach begin1 end${page.totalPage} varmyPageNoli c:if test${myPageNo mq.pageNo}classactive/c:ifa pageNoButton href#${myPageNo}/a/li/c:forEachli idnexta href#Next/a/li/ul
/div
/body
/html上一页和下一页的逻辑
var pageNo $(#pageNo).val();
var totalPage $(#totalPage).val();pageNo parseInt(pageNo);
totalPage parseInt(totalPage);
//如果已经到首页和尾页并且只有一页
if (pageNo 1 pageNo totalPage) {$(#prev).addClass(disabled);$(#next).addClass(disabled);
}//如果在首页且不只有一页
if (pageNo 1 pageNo totalPage) {$(#prev).addClass(disabled);$(#next).removeClass(disabled);
}//如果不只有一页且不在首页和尾页
if (pageNo 1 pageNo totalPage) {$(#prev).removeClass(disabled);$(#next).removeClass(disabled);
}//如果不只有一页且不在尾页
if (pageNo 1 pageNo totalPage) {$(#prev).removeClass(disabled);$(#next).addClass(disabled);
}$(#prev).click(function () {$(#pageNo).val(--pageNo);$(#txForm).submit();
})$(#next).click(function () {$(#pageNo).val(pageNo);$(#txForm).submit();
})$(a[pageNoButton]).click(function () {var pageNo $(this).html();$(#pageNo).val(pageNo);$(#txForm).submit();
})
