SpringMvc+Mybatis+Pagehelper+前端分页插件实现分页详解

Pagehelper的使用

1. 引入分页插件
   引入分页插件有下面2种方式，推荐使用 Maven 方式。

1). 引入 Jar 包
你可以从下面的地址中下载最新版本的 jar 包

https://oss.sonatype.org/content/repositories/releases/com/github/pagehelper/pagehelper/

http://repo1.maven.org/maven2/com/github/pagehelper/pagehelper/

由于使用了sql 解析工具，你还需要下载 jsqlparser.jar：

http://repo1.maven.org/maven2/com/github/jsqlparser/jsqlparser/0.9.5/
2). 使用 Maven
在 pom.xml 中添加如下依赖：

<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper</artifactId>
    <version>最新版本</version>
</dependency>

最新版本号可以从首页查看。
2.在mybatis的配置文件中添加对pagehelper 的配置

		<!-- com.github.pagehelper为PageHelper类所在包名 -->
	    <plugin interceptor="com.github.pagehelper.PageHelper">
	        <!-- 4.0.0以后版本可以不设置该参数 -->
	        <property name="dialect" value="mysql"/>
	        <!-- 该参数默认为false -->
	        <!-- 设置为true时，会将RowBounds第一个参数offset当成pageNum页码使用 -->
	        <!-- 和startPage中的pageNum效果一样-->
	        <property name="offsetAsPageNum" value="true"/>
	        <!-- 该参数默认为false -->
	        <!-- 设置为true时，使用RowBounds分页会进行count查询 -->
	        <property name="rowBoundsWithCount" value="true"/>
	        <!-- 设置为true时，如果pageSize=0或者RowBounds.limit = 0就会查询出全部的结果 -->
	        <!-- （相当于没有执行分页查询，但是返回结果仍然是Page类型）-->
	        <property name="pageSizeZero" value="true"/>
	        <!-- 3.3.0版本可用 - 分页参数合理化，默认false禁用 -->
	        <!-- 启用合理化时，如果pageNum<1会查询第一页，如果pageNum>pages会查询最后一页 -->
	        <!-- 禁用合理化时，如果pageNum<1或pageNum>pages会返回空数据 -->
	        <property name="reasonable" value="false"/>
	        <!-- 3.5.0版本可用 - 为了支持startPage(Object params)方法 -->
	        <!-- 增加了一个`params`参数来配置参数映射，用于从Map或ServletRequest中取值 -->
	        <!-- 可以配置pageNum,pageSize,count,pageSizeZero,reasonable,orderBy,不配置映射的用默认值 -->
	        <!-- 不理解该含义的前提下，不要随便复制该配置 -->
	        <property name="params" value="pageNum=pageHelperStart;pageSize=pageHelperRows;"/>
	        <!-- 支持通过Mapper接口参数来传递分页参数 -->
	        <property name="supportMethodsArguments" value="false"/>
	        <!-- always总是返回PageInfo类型,check检查返回类型是否为PageInfo,none返回Page -->
	        <property name="returnPageInfo" value="none"/>
	    </plugin>

后台逻辑代码

@RequestMapping(value="findScrollList")
	@ResponseBody
	public PageInfo<MallScroll> findList(MallScroll mallScroll,Integer pageNum,Integer pageSize){
		PageHelper.startPage(pageNum, pageSize);
		return new PageInfo<>(mallScrollService.findList(mallScroll));
	}

前台分页插件
参考地址：http://www.jq22.com/jquery-info13342
前端逻辑代码
html代码:

  <div class="content_box">
            <div class="cont">
                <div class="cont_box">
                    <ul id="myTab" class="nav nav-tabs">
                        <li class="active" id="jy">
                            <a href="#list1" data-toggle="tab">传统技艺 </a>
                        </li>
                        <li id="ms">
                            <a href="#list2" data-toggle="tab">特色名俗 </a>
                        </li>
                        <li id="ys">
                            <a href="#list3" data-toggle="tab">歌舞艺术 </a>
                        </li>
                        <li id="sy">
                            <a href="#list4" data-toggle="tab">美食手艺 </a>
                        </li>
                    </ul>
                </div>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="list1">
                        <ul id="list">
                                                  
                        </ul>
                    </div>
                                                  
                </div>
                <div><ul class="page" maxshowpageitem="5" pagelistcount="12"  id="page"></ul></div>
            </div>		
        </div>

js代码

	<script type="text/javascript" src="js/page.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			getListScorll('jy',1)	
	    })
	    $("#myTab").on('click','li',function(){
	    	getListScorll($(this)[0].id,1)
	    })
	    function pageShow(pNo){
			$('#myTab li').each(function(i,e){
        		if(e.className=='active'){
        			getListScorll(e.id,pNo)
        		}
        	});
		}
		var pageNum=1,pageSize=12;
		function getListScorll(type,pageNum){
			console.log(type)
			$("#list").empty();
			$.ajax({
		  		url:"../mallScroll/findScrollList",
		  		data:{type:type,pageNum:pageNum,pageSize:pageSize},
		  		type: 'POST',
		  		dataType:"json",
		  		success:function(data){
		  			console.log(data)	  		
		  			var html='';
					if(data.list&&data.list.length>0){
						for(var i=0;i<data.list.length;i++){
			  				html += '<li>'+
	                        			'<img src="'+data.list[i].titlepic+'">'+
	                    				'<h3>'+data.list[i].title+'</h3>'+
	                				'</li>'
			  			}
			  			$("#list").append(html)
			  			$("#page").show()
			  			$("#page").initPage(data.total,pageNum,pageShow)
		  			}else{
		  				$("#page").hide()
		  				$("#list").append("<p>暂无数据!</p>")
		  			}		  
		  		}
		  	});
		}
	</script>