SSM框架下BootStrap分页

开发环境

1.eclipse 64位

2.jdk 1.8

3.maven 3.5

4.mysql 5.6

步入正题

1.首先创建一个maven工程，File - New - Maven project

2.在pom.xml中引入一个jar包

 <!-- 分页组件 -->
        <dependency> 
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.0.1</version>
        </dependency>

3.mybatis.cfg.xml 编写分页配置

 <plugins>
        <!-- com.github.pagehelper为PageHelper类所在包名 -->
        <plugin interceptor="com.github.pagehelper.PageInterceptor">
            <!-- 4.0.0以后版本可以不设置该参数 -->
            <!-- <property name="dialect" value="oracle"/> -->
            <!-- 该参数默认为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>
    </plugins>

4.前台页面

<table class="table" id="file-table" border="1"></table>
<script type="text/javascript">
		//页面加载
	$(function(){
		$("#file-table").bootstrapTable({
			   url:"<%=request.getContextPath()%>/ShowBook.do",
			   striped: true,//隔行变色
			   showColumns:true,//是否显示 内容列下拉框
			   showPaginationSwitch:true,//是否显示 数据条数选择框
			   minimumCountColumns:1,//最小留下一个
			   showRefresh:true,//显示刷新按钮
			   showToggle:true,//显示切换视图
			   search:false,//是否显示搜索框
			 //  searchOnEnterKey:true,//设置为 true时，按回车触发搜索方法，否则自动触发搜索方法
			   pagination:true,//开启分页
			   paginationLoop:true,//开启分页无限循环
			   pageNumber:1,//当前页数
			   pageSize:2,//每页条数
			   pageList:[2,3,4,5],//如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
			   sidePagination:"server",//
			   method:'post',//发送请求的方式
			   contentType:"application/x-www-form-urlencoded",//必须的否则条件查询时会乱码
			   queryParams:function(){
				   return{
					   page:this.pageNumber,
					   rows:this.pageSize
				   }
			   },
			   columns: [
			    {
				    checkbox:true,
			   },{
		           field: 'bookid',
		           title: '书籍编号',
		           idField:true,
		           width: 100


		       },{
	               field: 'bookname',
	               title: '书籍名称',
	               width: 100


	           },{
	        	   field: 'booktype',
	               title: '书籍类型',
	               width: 100
	               
	           },{
	        	   field: 'bookprice',
	               title: '书籍价格',
	               width: 100,
	              
	           },{
	        	   field: '11',
	               title: '操作',
	               width: 100,
	               formatter:function(value,row,index){
	            	   //class="btn btn-info"
	            	   //class="btn btn-primary"
	            	   var str = '<input type="button" value="预览" class="btn btn-info" οnclick="preview(\''+row.bookname+'\',\''+row.bookname+'\')"/><input type="button" value="置顶" class="btn btn-primary" οnclick="topZD(\''+row.id+'\')"/>';
	            	   str += '<input type="button" value="修改" class="btn btn-info" οnclick="updateFile(\''+row.id+'\')"/>';
	            	   return str;
	               }
	           }]
		   })
	})
    //列表展示
    function searchButton(){
		$("#file-table").bootstrapTable("refresh",{'pageNumber':1});
	} 
 </script> 

5.controller层

	        @RequestMapping(value = "ShowBook")
		@ResponseBody
		Map<String , Object> ShowBook(Book book,@NotNull Integer page,@NotNull Integer rows){
			return bookService.ShowBook(book,page,rows);
			}
		}

6.这两个属性是要在实体类定义成临时的字段 数据库中不用存

7.service 实现类

	@Override
	public Map<String, Object> ShowBook(Book book, Integer page, Integer rows) {
		//需要分页
		PageHelper.startPage(Integer.valueOf(page), Integer.valueOf(rows));
		List<Book> list = bookMapper.showbook(book);
		int pageNum = ((Page) list).getPageNum();
		int pages = ((Page) list).getPages();
		long total = ((Page) list).getTotal();
		System.out.println("当前页：" + pageNum);
		System.out.println("当条数：" + total);
		Map<String, Object> map = new HashMap<>();
		map.put("total", total);
		map.put("rows", list);
		return map;
	}

8.mapper.xml 只需要这样写

  <select id="showbook" resultMap="BaseResultMap">
  	select * from book
  </select>

9.效果展示

10.sql语句 

CREATE TABLE `book` (
  `bookid` int(11) NOT NULL AUTO_INCREMENT,
  `bookname` varchar(255) DEFAULT NULL,
  `booktype` varchar(255) DEFAULT NULL,
  `bookprice` int(10) DEFAULT NULL,
  PRIMARY KEY (`bookid`)
) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8;