SpringBoot2 学习7 JPA+Jquery 分页

最新推荐文章于 2023-03-18 10:31:29 发布

潘多编程

最新推荐文章于 2023-03-18 10:31:29 发布

阅读量514

点赞数

分类专栏： SpringBoot

本文链接：https://blog.csdn.net/h356363/article/details/99694437

版权

SpringBoot 专栏收录该内容

46 篇文章 11 订阅

订阅专栏

效果

在这里插入图片描述

关键代码

contrller

@RequestMapping("page")
	public Page<User> pageTest(HttpServletRequest request){
		String startpage=request.getParameter("start");
		System.out.println("startpage=="+startpage);
		return userService.findAll(startpage, "5");
	}

Service

public Page<User> findAll(String page, String limit){
		Pageable pageable = PageRequest.of(Integer.parseInt(page), Integer.parseInt(limit));
		Page<User> pageinfo=userRepository.findAll(pageable);
		return pageinfo;
	}

如果需要分页+排序

 public Page<Member> showall( int page, int size){
        /**
         * Sort.Direction.DESC 表示 从大到小
         * Sort.Direction.ASC  表示 从小到大
         */
        Sort sort=new Sort(Sort.Direction.DESC,"id");
        Pageable pageable= PageRequest.of(page,size,sort);

        return  memberRepository.findAll(pageable);
    }

UserRepository
过程中，遇到坑，分页要继承JpaRepository。不能用CrudRepository

package com.zz.repository;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.repository.CrudRepository;

import com.zz.entity.User;

public interface UserRepository extends  JpaRepository<User,String>{
	
	public User findByNameAndPwd(String name,String pwd);

}

html

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>JPA 分页演示</h2>
  <div class="table-responsive">          
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>序号</th>
        <th>名字</th>
        <th>性别</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody id="databody">
      
    </tbody>
  </table>
  </div>
  <div class="row">
  <div class="col-sm-3"></div>
  <div class="col-sm-6">
	   <ul class="pagination">
	   
	  </ul>
  
  </div>
   <div class="col-sm-3"></div>
</div>
  
</div>

<script type="text/javascript">
$(document).ready(function(){
	  // 在这里写你的代码...
    var currentpage=0;
    getData();
  
	  
	  
	  
	  function getData(){
		  $.getJSON("/b/user/page", { start: currentpage}, function(json){
			  console.log("************1****"+currentpage);
		  		var contentdata=json.content;
		  	  $("#databody").empty();
		       for(var i=0;i<contentdata.length;i++){
		    	   $("#databody").append(" <tr>");
						$("#databody").append(" <td>"+contentdata[i].id+"</td>");
						$("#databody").append(" <td>"+contentdata[i].name+"</td>");
						$("#databody").append(" <td>"+contentdata[i].sex+"</td>");
						$("#databody").append(" <td>"+contentdata[i].age+"</td>");
		    	   $("#databody").append(" </tr>");
		       }
		       
		       //动态设置分页
			 var totalPagesnumber=json.totalPages;
			  $(".pagination").empty();
			  $(".pagination").append('<li class=""><a class="page-link" href="#" id="firstpage">首页</a></li>');
			  $(".pagination").append('<li class=""><a class="page-link" href="#" id="previosepage">上一页</a></li>');
		       for(var j=0;j<totalPagesnumber;j++){
		    	   $(".pagination").append(' <li class="page-item" id="pageno'+j+'"><a class="page-link" href="#">'+(j+1)+'</a></li>');
		       } 
		       $(".pagination").append(' <li class=""><a class="page-link" href="#" id="nextpage">下一页</a></li>'); 
			//把当前页，颜色变成蓝色
				$(".page-item").removeClass("active");
				$("#pageno"+currentpage).addClass("active");
				
				    $(".page-item").click(function(){
					  
					  var idval=this.id;
					  currentpage=idval.substr(6);
					  
					  getData();
				  })
		       
				  
				  //下一页
			  $("#nextpage").click(function(){
				  var  curr= new Number(currentpage);
				  currentpage=curr+1;
				  getData();
			  })
			  
			  
			  //上一页
			   $("#previosepage").click(function(){
				   var  curr= new Number(currentpage);
				  currentpage=curr-1;
				  getData();
			  })
			  
			   //首页
			   $("#firstpage").click(function(){
				  currentpage=0;
				  getData();
			  })
			  
		});
		
	  }
	  
	  
	  
    
	})



</script>

</body>
</html>

潘多编程

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot2 学习7 JPA+Jquery 分页

效果关键代码contrller@RequestMapping("page") public Page<User> pageTest(HttpServletRequest request){ String startpage=request.getParameter("start"); System.out.println("startpage=="+startpage...
复制链接

扫一扫

专栏目录