1， 导入laypage.js (要注意下载laypage.css)

  <script type="text/javascript" src="../lib/laypage/1.2/laypage.js"></script>
  <script src="js/jquery.js"></script>

2，在table里给个div模型让分页有地方放

<table>
 <thead>
               <tr class="text-c">
                <th width="80"  name="zwid">ID</th>
                <th width="80"name="username">员工名称</th>
                <th width="100"name="finame">分类名称</th>
                <th width="100" id="caozuo">操作</th>
            </tr>
         <tbody id="tbody">

            </tbody>

</table>
 <div id="pagebox"  class="page"  style="float:right "></div>


<script id="tmplArticle" type="text/x-jquery-tmpl">
            <tr class="text-c">
       <td data-name='zwid'>${zwid}</td>
        <th data-name='username'>${username}</td>
<td class="xiaoxing"> <a style="text-decoration:none" class="ml-5" onClick="men_edit('账目清单编辑','termadduser.html',this)"   href="javascript:;" title="编辑"><i class="Hui-iconfont">&#xe6df;</i></a><input type="button" style="text-decoration:none" class="ml-6" id="delete" onclick="Delete(this)" value="删除" /></td>
</tr>
</tr>
</script>


<script src="js/jquery.tmpl.min.js"></script>
<script type="text/javascript">
var  page=1;
var pageSize=15;
    //查询和显示，
var Load=function(){
 $("#tbody").html("");//清空页面的值
  //  var pageSize = $.trim($('[name="pageSize"]').val())
    var seanum=$("#seanum").val();
    var url = '/api/termshow';//数据显示
    $.ajax({
      async: false,
        url: url,
        dataType: "json",
        data: {page: page, pageSize: pageSize, seanum: seanum},
        success: function (response) {
   $("#tmplArticle").tmpl(response.data.list).appendTo("#tbody");  //显示数据

//分页插件
            laypage({
                     cont: 'pagebox',//容器的id来存放分页符
                pages: response.data.pages, //数据总数，从服务端得到
                curr: page,//从页面获取的当前页数
                     limit: pageSize,//每页多少条数据
                    jump: function(obj, first){
                        page = obj.curr; //得到当前页，以便向服务端请求对应页的数据。
                        limit = obj.limit; //得到每页显示的条数
                        //首次不执行
                       if(!first){
                            Load();
                        }
                    }
                });

后台

1，导入jar

<!-- springboot整合mybatis -->
<dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>1.3.1</version>
</dependency>
<!-- springboot分页插件 -->
<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper-spring-boot-starter</artifactId>
   <version>1.2.3</version>
</dependency>

2， controller

    @RequestMapping("/termshow")
    public String TermShow(int page, String seanum, int pageSize) throws IOException {
        APIResultModel result = new APIResultModel();
        result = zhangWuService.TermShow(page, seanum, pageSize, result);
          return result.toString();

    }

3,service

import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
@Service
@Transactional(rollbackFor = { RuntimeException.class, Exception.class })//保证事务一致性，发生异常回滚事务
public class ZhangWuService {
   public APIResultModel TermShow(int page, String seanum, int pageSize, APIResultModel result)
 throws IOException {
         PageHelper.startPage(page, pageSize);  //一行代码实现分页
           List<ZhangWuEntity> list = zhangWuMapper.TermShow(seanum);//ZhangWuEntity  数据实体类
           PageInfo<ZhangWuEntity> pagehelper = new PageInfo<>(list); //装填数据
         result.setData(pagehelper);
    return result;
}

}

4 ，mapper

@Select("SELECT a.checkedpower FROM  role_right a where a.role_id=(select b.role from user_login b where b.username=#{username})")
    List<RoleRightEntity> TermShowpowel(@Param(value = "username") String username);

https://blog.csdn.net/qq_28988969/article/details/78082116 参照的分页