SpringBoot2 学习7 JPA+Jquery 分页

你的名字 2021-10-01 05:40 448阅读 0赞

# 效果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gzNTYzNjM_size_16_color_FFFFFF_t_70]

# 关键代码 #

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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gzNTYzNjM_size_16_color_FFFFFF_t_70]: /images/20210726/cca9916494394a479554292b0e28304c.png