通过bootstrap来进行分页功能

1.分页所需要的jsp内容

//1 加载的css / js
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/bootstrap.css">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-3.0.0.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jqPaginator.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
2.一个标签
<div class="pagination-layout">
			<div class="pagination">
				<ul class="pagination">
				</ul>
			</div>
		</div>
3.函数调用
window.onload=function(){
		var if_firstime=true;
		$(".pagination").jqPaginator({
        //拿到总页数
			totalPages:${pageInfo.totalPages},
			visiblePages:3,
//拿到当前页
			currentPage:${pageInfo.pageNo},
		 	first: '<li class="first"><a href="javascript:void(0);">第一页</a></li>',
	        prev: '<li class="prev"><a href="javascript:void(0);">上一页</a></li>',
	        next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
	        last: '<li class="last"><a href="javascript:void(0);">最后一页</a></li>',
	        page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
	        onPageChange:function(num){
	        	/* alert(num) */
	        	/* 防止进入死循环 */
	        	if(if_firstime){
	        		if_firstime=false;
	        	}else if(!if_firstime){
	        		changePage(num);
	        	} 	
	        }
		});
	}
    //页面如果变化的函数
	function changePage(num){
		alert(num)
		$("#pageNum").val(num);
	    $("#frm").submit(); 
	}

 

2.servlet


int pageNo;

	request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		StudentInfoServiceImp serviceImp = new StudentInfoServiceImpI();
		ClassInfoServiceImp classInfo = new ClassInfoServiceImpI();
		List<ClassInfo> allClassInfos = null;
		List classList = new ArrayList();
		String pageNum = request.getParameter("pageNum");
		String name = request.getParameter("name");
开始给一个当前页的默认值	
		int pageNo=0;
如果页面传过来了,那么进行赋值,负责就pageNo==1
		if (pageNum == null || pageNum.equals("")) {
			pageNo = 1;
		} else {
			pageNo = Integer.parseInt(pageNum);
		}
		PageBean<StudentInfoVo> pageInfo = new PageBean();
		pageInfo.setPageNo(pageNo);
		System.out.println(pageInfo.getPageNo() + "新的页面");
		try {
			pageInfo = serviceImp.selectInfoByPageAndName(pageInfo, name);
			allClassInfos = classInfo.getAllClassInfos();
		} catch (Exception e) {
			e.printStackTrace();
		}
		for (int i = 0; i < allClassInfos.size(); i++) {
			classList.add(allClassInfos.get(i).getClassname());
		}
		request.setAttribute("pageInfo", pageInfo);
		request.setAttribute("classInfos", classList);
		request.setAttribute("name", name);
		request.getRequestDispatcher("/studentInfo.jsp").forward(request, response);

如果需要加入不同的搜索条件的,则需要通过表单提交过来,

 

<form id="frm" class="form-horizontal"
			action="${pageContext.request.contextPath }/StudentInfoServlet"
			method="post">
			<div class="form-group">
				<label class="control-label col-sm-3">搜索</label>
				<div class="col-sm-2">
//    el表达式,帮名字给存储起来
					<input type="text" name="name" value="${name }" class="form-control" />
				</div>
			</div>
//这里的pageNum值有 下面function里面val()设置
			<div class="form-group">
				<input type="hidden" name="pageNum" id="pageNum"
					class="form-control" />
			</div>
			<div>
				<input type="submit" value="提交" class="btn btn-primary">
			</div>
		</form>

 另外加上实现的mysql分页语法

// 找到所有学生和教室信息合并成一张表的数据
	@Override
	public List<StudentInfoVo> getAllStudentsInfo() throws DaoException {
		StringBuffer sql = new StringBuffer();
		sql.append( "SELECT s.id,s.name,s.age,c.classname from student s left JOIN class c on s.classid=c.id");
		List<StudentInfoVo> list = null;
		try {
			list = template.queryAll(sql.toString(), studentInfoVo);
		} catch (Exception e) {
			e.printStackTrace();
			throw new DaoException("Dao层找所有的学生信息出错");
		}
		return list;
	}

	// 只根据一个PageBean传来当前页码进行分页。
	@Override
	public PageBean<StudentInfoVo> selectInfoByPage(PageBean<StudentInfoVo> pageBean) throws Exception {
		StringBuffer sql = new StringBuffer();
		List<StudentInfoVo> queryAll = null;
		PageBean<StudentInfoVo> pageInfo = null;
		sql.append("SELECT s.id,s.name,s.age,c.classname from student s left JOIN class c on s.classid=c.id where 1=1");
		sql.append(" LIMIT ?,?");
		try {
			int pre = (pageBean.getPageNo() - 1) * PageInfo.PAGESIZE;
			queryAll = template.queryAll(sql.toString(), studentInfoVo, pre, PageInfo.PAGESIZE);
			int sum = getAllStudentsInfo().size();
			pageInfo = new PageBean(pageBean.getPageNo(), PageInfo.PAGESIZE, sum);
			pageInfo.setList(queryAll);
		} catch (JDBCExpetion e) {
			e.printStackTrace();
			throw new DaoException("Dao层找所有的学生信息根据页码");
		}
		return pageInfo;
	}


	// 根据传来的用户名来进行从数据库里查找,返回长度,如果没有数据名,则返回所有信息的长度
	@Override
	public Integer getAllStudentsInfoByName(String name) throws DaoException {
		List queryAll = null;
		StringBuffer sql = new StringBuffer();
		sql.append("SELECT s.id,s.name,s.age,c.classname from student s left JOIN class c on s.classid=c.id where 1=1");
		if (name != null && !name.equals("")) {
			sql.append(" and name like '%").append(name).append("%'");
		}
		List<StudentInfoVo> studentInfoVos = null;
		try {
			queryAll = template.queryAll(sql.toString(), studentInfoVo);
		} catch (Exception e) {
			e.printStackTrace();
			throw new DaoException("Dao层找所有的学生信息出错");
		}
		return (queryAll == null) ? null : queryAll.size();
	}
	
	// 根据传来的pageBean对象和名字,到数据库里面进行查,如果名字为空,
		// 那么返回的就是分页的信息,如果名字不为空,则找到所有名字匹配的信息,并且返回出去
		@Override
		public PageBean<StudentInfoVo> selectInfoByPageAndName(PageBean<StudentInfoVo> pageBean, String name) {
			List queryAll = null;
			StringBuffer sql = new StringBuffer();
			PageBean<StudentInfoVo> pageInfo = null;
			sql.append("SELECT s.id,s.name,s.age,c.classname from student s left JOIN class c on s.classid=c.id where 1=1");
			if (name != null && !name.equals("")) {
				sql.append(" and name like '%").append(name).append("%'");
			}
			sql.append(" order by id");
			sql.append(" limit ?,?");
			try {
				queryAll = template.queryAll(sql.toString(), studentInfoVo, (pageBean.getPageNo() - 1) * PageInfo.PAGESIZE,
						PageInfo.PAGESIZE);
				pageInfo = new PageBean<>(pageBean.getPageNo(), PageInfo.PAGESIZE, getAllStudentsInfoByName(name));
				pageInfo.setList(queryAll);
			} catch (Exception e) {
				e.printStackTrace();
			}
			return pageInfo;
		}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值