基于bootstrap的paginator和springboot mybatis的pagehelper分页（带搜索功能）

迷南。 2022-03-16 08:46 172阅读 0赞

**一、pagehelper的配置**

1、pom.xml 中引入pagehelper依赖

<dependency>
    	<groupId>com.github.pagehelper</groupId>
    	<artifactId>pagehelper-spring-boot-starter</artifactId>
    	<version>1.2.5</version>
    </dependency>

2、application.yml 中加入pagehelper的配置（）

pagehelper:
        helperDialect: postgresql
        reasonable: true
        supportMethodsArguments: true
        params: count=countSql

3、service层直接调用即可

PageHelper.startPage(pageNum, pageSize);	//	页码和每页显示条数
    	List<AASearch> appsList = aaSearchMapper.selectPageAll();		//	紧跟查询语句，否则没用
    	PageInfo<AASearch> appsPageInfo = new PageInfo<>(appsList);	//	包装page对象

来看一下page对象中的数据。总条数用来前端判断页数---到此pagehelper就配置完了

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3prXzEzMjU1NzI4MDM_size_16_color_FFFFFF_t_70]  
4、controller  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3prXzEzMjU1NzI4MDM_size_16_color_FFFFFF_t_70 1]

**二、开始bootstrap的paginator的分页**  
1、js和css的引入，注意顺序

paginator的js下载地址 [https://github.com/lyonlai/bootstrap-paginator][https_github.com_lyonlai_bootstrap-paginator]

2、html页面

<input type="text" class="search-text" name="querys" id="querys" value="" autofocus placeholder="请输入姓名" maxlength="25"/>
    	<button id="submitBut">查 询</button>
    	
    	<div id="Paginator" style="text-align: right;"> 
    		<ul id="pageLimit">
    		</ul> 
    	</div>

3、javascript

4、效果—END  
![在这里插入图片描述][20190227102721921.png]  
![在这里插入图片描述][20190227102735713.png]

**不足之处：不像百度式的当前页面显示在中间，自动显示上下几页。（比如：我点击第10页，自动显示为6，7，8，9，10，11，12，13，14，15）**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3prXzEzMjU1NzI4MDM_size_16_color_FFFFFF_t_70]: /images/20220316/cbb69e3fbf7146fbbbf6b7f37c0a54ee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3prXzEzMjU1NzI4MDM_size_16_color_FFFFFF_t_70 1]: /images/20220316/8f28d4c4ca7942e486871593c7e5a496.png
[https_github.com_lyonlai_bootstrap-paginator]: https://github.com/lyonlai/bootstrap-paginator
[20190227102721921.png]: /images/20220316/85b37430dd2d4f0aa946d06a36e44955.png
[20190227102735713.png]: /images/20220316/a82d03014e2c4027a24cdc364c0dc36b.png