spring boot spring data jpa bootstrapPaginator 实现分页

后台

@RequestMapping("/song")

@ResponseBody
public Page<Song> Song(ModelMap map,@RequestParam(value = "page", defaultValue = "1") Integer page,@RequestParam(value ="count", defaultValue ="20") Integer size ) {
Sort sort = new Sort(Direction.DESC, "id");
System.out.println(page);
System.out.println(size);
   Pageable pageable = new PageRequest(page,size, sort);
Page<Song> songList= SongRepository.findAll(pageable);
System.out.println(songList);
return songList;

}

前台

  <div id="list">
  <table class="table table-hover" style="border-width: 1px;border-style: dashed;">  
        <thead>  
        <tr>  
            <th>序号</th>  
            <th>歌名</th>  
        </tr>  
        </thead>   
        <tr th:each="obj:${list}">  
            <td th:text="${obj.id}">${obj.id}</td>  
            <td th:text="${obj.name}">${obj.name}</td>   
        </tr>
        <tbody>  
        </tbody>  
    </table> 
    </div> 
<div class="container">
<div id="example" > 
<ul id="page">
</ul> 
</div>
</div>

 

<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap-paginator.js"></script>
<script>
    $('#page').bootstrapPaginator({
        currentPage: 1,//当前的请求页面。
        totalPages: 20,//一共多少页。
        size:"normal",//页眉的大小。
        bootstrapMajorVersion: 3,//bootstrap的版本要求。
        alignment:"right",
        numberOfPages:10,//一页列出多少数据。
        itemTexts: function (type, page, current) {//如下的代码是将页眉显示的中文显示我们自定义的中文。
            switch (type) {
            case "first": return "首页";
            case "prev": return "上一页";
            case "next": return "下一页";
            case "last": return "末页";
            case "page": return page;
            }
        },
        onPageClicked: function(event, originalEvent, type, page){//给每个页眉绑定一个事件，其实就是ajax请求，其中page变量为当前点击的页上的数字。
        $('#list').html("");//清空   
        $.ajax({
               url:'/song',
               type:'post',
                   data:{'page':page,'count':10},
                   dataType:'JSON',
                   success:function (data) {
                    $.each(data.content, function( id, song) { //遍历返回的json
                                $("#list").append('<table class="table table-hover" style="border-width: 1px;border-style: dashed;">');
                                $("#list").append('<thead>');
                                $("#list").append('<tr>');
                                $("#list").append('<th>序号</th>');
                                $("#list").append('<th>歌名</th>');
                                $("#list").append('<th>&nbsp;</th>');
                                $("#list").append('</tr>');
                                $("#list").append('</thead>');
                                $("#list").append('<tbody>');
                                $("#list").append('<tr>');
                                $("#list").append('<td>'+song.id);
                                $("#list").append('&nbsp;');
                                $("#list").append('<a href="https://music.163.com//song?id='+song.id+'">'+song.name+'</a></td>');
                                $("#list").append('<td>');
                                $("#list").append('</td>');
                                $("#list").append('</tr>');
                                $("#list").append('</tbody>');
                                $("#list").append('<tr>');
                                $("#list").append('</tr>');
                                $("#list").append('</table>'); 
                   })
                  
           }
        })
    }
    });
    </script>

 

欢迎访问我的网站

欢迎 ⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️

< END >

程序员NBA

一个有故事的程序员

或者加我微信1414200300一起讨论java技术，有什么问题群里人也可以帮你一起解决