复制代码

为懒人提供无限可能,生命不息,code不止

人类感性的情绪,让我们知难行难
我思故我在
日拱一卒,功不唐捐
  • 首页
  • 前端
  • 后台
  • 数据库
  • 运维
  • 资源下载
  • 实用工具
  • 接口文档工具
  • 登录
  • 注册

mybatis

【原创】web分页功能实现(mybatis,springmvc,jsp,js)

作者: whooyun发表于: 2017-03-22 00:02

web分页功能需要先理清思路才能更好实现
1、dao层的处理,mybatis(mysql)使用limit进行sql查询处理,比如每页显示10行,则sql如select * from table_name limit 0,10
看这里,java后台分页ArticleMapper.xml(mybatis)-之二
2、PageVo 用来显示分页数据(当前页,总条数,总页数,需要展示的分页数据对象)
看这里,java后台分页PageVO-之一
3、controller控制层(只要知道当前页是第几页就能得出mysql需要从哪一行查询到哪一行)
看这里,java后台分页controller(springMVC)之三
4、jsp前端分页实现需要增加如下代码

<form action="/index" id="showpage">
<input type="hidden" id="currentIndex" name="currentIndex" value="1">
<input type="hidden" id="pgCount" name="pgCount" value="2">
<div class="pagination-center" id="pgDiv">
</div>
</form>
/**
*当前页码 (分页的标签)
*/
function clickPage(index){
$('#currentPage').val(index);
$('#record_search').submit();
}

/*
页面加载完成后则开始生成分页标签。
currentPage 当前页码
maxPageCount 显示多少个页码标签
totalPgCount 总共有多少页数据
pgDivName 显示页面标签的div名字*/
$(document).ready(function(){
var currentPage = $('#currentPage').val();
var maxPageCount =10;
var totalPgCount = $('#pgCount').val();
var pgDivName = 'pgDiv';
paping(currentPage,maxPageCount,totalPgCount,pgDivName);
});


/*
currentPage 当前页码
maxPageCount 显示多少个页码标签
totalPgCount 总共有多少页数据
pgDivName 显示页面标签的div*/
function paping(currentPg, maxPageCount, totalPgCount, pgDivName) {
    var maxPageCount = Number(maxPageCount); //最大显示页数
    var pageCount = Number(totalPgCount); //总页数
    var currentPage = Number(currentPg);
    if(totalPgCount>1){
    if(maxPageCount=='Nan'){
    	console.log("最大显示页数参数传入错误=="+maxPageCount);
    }
    if(pageCount=='Nan'){
    	console.log("总页数参数传入错误=="+pageCount);
    }
    if(currentPage=='Nan'){
    	console.log("当前页参数传入错误=="+currentPage);
    }
    //如果当前页大于总页数 则设置当前页=总页数
    if (currentPage == pageCount) {
        currentPage = pageCount;
    }
    var htlStr = [];
    htlStr.push('<ul class="pagination">');
    //小于最大显示页数 直接循环
    htlStr.push('<li class="prev"><a href="javascript:clickPage(' + (currentPage - 1 > 1 ? currentPage - 1 : 1) + ');">上一页</a></li>');
    if (pageCount < maxPageCount + 1) {
        for (var i = 1; i < pageCount + 1; i++) {
            if (i == currentPage) {
                htlStr.push('<li class="page active" ><a href="javascript:;" >' + (i) + '</a></li>');
            } else {
                htlStr.push('<li class="page" ><a href="javascript:clickPage(' + (i) + ')" >' + (i) + '</a></li>');
            }
        }
        htlStr.push('<li class="next"><a href="javascript:clickPage(' + (currentPage + 1 < pageCount ? currentPage + 1 : pageCount) + ')" >下一页</a></li>');
    } else {
        /**
	 * 当前页-5 当前页+4 
	 */
        var begin = 0;
        var end = 0;
        if (currentPage - 5 > 0) {
            /**
		  * 限制每次最多展示10页 算法 展示不同的页数算法也不一样
		  */
            begin = currentPage - 5;
            end = parseInt(currentPage + 4);
            if (currentPage >= pageCount - 3) {
                begin = pageCount - maxPageCount + 1;
                end = pageCount;
            }
            for (var i = begin; i < (parseInt(end) + 1); i++) {
                if (i == currentPage) {
                    htlStr.push('<li class="page active" ><a href="javascript:clickPage(' + (i) + ')" >' + (i) + '</a></li>');
                } else {
                    htlStr.push('<li class="page" ><a href="javascript:clickPage(' + (i) + ')" >' + (i) + '</a></li>');
                }
            }
            htlStr.push('<li class="next"><a href="javascript:clickPage(' + (currentPage + 1 < end ? currentPage + 1 : end) + ')" >下一页</a></li>');
        } else {
            for (var i = 1; i < maxPageCount + 1; i++) {
                if (i == currentPage) {
                    htlStr.push('<li class="page active" ><a href="javascript:clickPage(' + (i) + ')" >' + (i) + '</a></li>');
                } else {
                    htlStr.push('<li class="page" ><a href="javascript:clickPage(' + (i) + ')" >' + (i) + '</a></li>');
                }
            }
            htlStr.push('<li class="next"><a href="javascript:clickPage(' + (currentPage + 1 < pageCount ? currentPage + 1 : pageCount) + ')" >下一页</a></li>');
        }
    }
    htlStr.push('</ul>');
    $('#' + pgDivName).html(htlStr.join(''));
    }
}