spring boot spring data jpa bootstrapPaginator 实现分页
来源:互联网 发布:卫裤网站源码 编辑:程序博客网 时间:2024/05/22 12:29
后台
@RequestMapping("/song")
@ResponseBodypublic 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> </th>');
$("#list").append('</tr>');
$("#list").append('</thead>');
$("#list").append('<tbody>');
$("#list").append('<tr>');
$("#list").append('<td>'+song.id);
$("#list").append(' ');
$("#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>
- spring boot spring data jpa bootstrapPaginator 实现分页
- spring-boot-data-jpa
- spring data jpa 分页
- 在Spring Boot中使用Spring-data-jpa实现分页查询
- springBoot+easyui +spring data JPA 实现分页
- Spring Data JPA+kkpager实现分页功能
- Spring Data Jpa实现分页查询
- Spring Boot+Spring Data JPA+Spring Cache
- spring boot集成data-jpa
- Spring Data Jpa 实现分页(Spring MVC+easyui)
- spring data jpa 分页查询
- spring data jpa分页查询
- spring data jpa 分页查询
- Spring Boot中使用Spring-data-jpa
- spring boot 使用spring data jpa
- spring boot 使用 spring data jpa
- Spring Boot中使用Spring-data-jpa
- spring boot and spring data jpa
- MainActivity
- 【python Django】django入门教程1
- [PAT]1017. Queueing at Bank (25)@Java
- 别磨叽,学完这篇你也是图像识别专家了
- 支持向量机通俗导论(理解SVM的三层境界)
- spring boot spring data jpa bootstrapPaginator 实现分页
- C#之程序结构图
- SQL中distinct的用法(四种示例分析)
- 微信分享到朋友圈接口用法
- tomcat服务器内存溢出错误:OutOfMemoryError: PermGen space
- 自媒体平台为什么强调垂直度
- NewsFragment
- 页面单选框<input type="radio">的分组与优化
- DataVP