본문 바로가기
Spring Boot

페이징!

웨이칭 2020. 9. 28. 13:14

arrow.png
0.02MB

댓글 화살표 이미지~

 

 

 

 

Eclipse

 

 

페이지 불러오는 부분

<div class="container">
	<nav aria-label="Page navigation">
		<ul class="pagination" id="pagination"></ul>
	</nav>
</div>

 

 

검색 css

	<div align="center">
		<select id="choice">
			<option value="sel">선택</option>
			<option value="title">제목</option>
			<option value="writer">작성자</option>
			<option value="content">내용</option>
		</select>
	
		<input id="searchWord" placeholder="검색어입력" size="20">
		<button type="button" id="searchBbs">검색</button>
		<button type="button" id="writeBbs">글추가</button>
	</div>

 

기타 스크립트

<script type="text/javascript">
$(document).ready(function(){
	
	getListData( 1 );
	getListCount();
});

$("#searchBbs").click(function(){
	getListData( 1 );
	getListCount();
});

function getListData( pNumber ) {
	
	$.ajax({
		url:"http://localhost:9000/getBbsPageList",
		type:"get",
		data:{ "nowPage":pNumber, "recordCountPerPage":10, "choice":$("#choice").val(), "searchWord":$("#searchWord").val() },
		success:function(list){
		//	alert('success');		
		//	alert(JSON.stringify(list));
				
			$("tbody").html("");
		
			$.each(list, function(i, item){
				let app = "<tr>"
						+ "		<th>" + (i + 1) + "</th>" 
						+ " 	<td>" + getArrow(item.depth) + "<a href='bbsdetail.html?seq=" + item.seq + "'>" + item.title + "</a></td>"
						+ "		<td>" + item.id + "</td>"
						+ "</tr>";		
						
				$("tbody").append(app);
				
			});		
		}
	});		
}

function getListCount() {	// paging [1][2]

	$.ajax({
		url:"http://localhost:9000/getBbsCount",
		type:"get",
		data:{ "nowPage":0, "recordCountPerPage":10, "choice":$("#choice").val(), "searchWord":$("#searchWord").val() },
		success:function(count){
			alert(count);
			loadPage(count);
		}
	});

}

function loadPage( totalCount ) {
	// 글의 총수
	let pageSize = 10;	// 보여주고 싶은 글의 갯수
	let nowPage = 1;
	
	let totalPages = totalCount / pageSize;	
	//	2				23			10
	if(totalCount % pageSize > 0){
		totalPages++; 
	}
	
	$("#pagination").twbsPagination('destroy');	// 페이지 갱신
	
	$("#pagination").twbsPagination({
	//	startPage: 1,
		totalPages: totalPages,
		visiblePages: 10,
		first:'<span aria-hidden="true">«</span>',
		prev:"이전",
		next:"다음",
		last:'<span aria-hidden="true">»</span>',
		initiateStartPageClick:false,	// onPageClick 자동호출을 하지 않는다
		onPageClick: function(event, page){	// 페이지 버튼을 클릭시
			nowPage = page;
		//	alert('nowPage:' + nowPage);
			getListData( page );
		}	
	});
	
}

function getArrow( depth ) {
	let rs = "<img src='./image/arrow.png' width='20px' height='20'/>";
	let nbsp = "&nbsp;&nbsp;&nbsp;&nbsp;";
	
	let ts = "";
	for(i = 0;i < depth; i++){
		ts += nbsp;
	}
	return depth==0?"":ts + rs;
}


</script>

 

 

전체 페이지

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script type="text/javascript" src="./jquery/jquery.twbsPagination.min.js"></script>

</head>
<body>

<h1>게시판</h1>

<div id="app" class="continer">
	<table class="table table-striped table-hover">
	<thead>
	<tr>
		<th>번호</th>
		<th>제목</th>
		<th>작성자</th>	
	</tr>	
	</thead>
	
	<tbody>	
	</tbody>
	
	</table>
	
	<br><br>
	
	<div class="container">
		<nav aria-label="Page navigation">
			<ul class="pagination" id="pagination" style="justify-content:center"></ul>
		</nav>
	</div>
	
	<br>
	
	<div align="center">
		<select id="choice">
			<option value="sel">선택</option>
			<option value="title">제목</option>
			<option value="writer">작성자</option>
			<option value="content">내용</option>		
		</select>
		
		<input id="searchWord" placeholder="검색어입력" size="20">
		<button type="button" id="searchBbs">검색</button>
		
		<br><br>
		<button type="button" id="writeBbs">글 추가</button>		
	</div>


</div>

<script type="text/javascript">
$(document).ready(function(){
	
	getListData( 1 );
	getListCount();
});

$("#searchBbs").click(function(){
	getListData( 1 );
	getListCount();
});

function getListData( pNumber ) {
	
	$.ajax({
		url:"http://localhost:9000/getBbsPageList",
		type:"get",
		data:{ "nowPage":pNumber, "recordCountPerPage":10, "choice":$("#choice").val(), "searchWord":$("#searchWord").val() },
		success:function(list){
		//	alert('success');		
		//	alert(JSON.stringify(list));
				
			$("tbody").html("");
		
			$.each(list, function(i, item){
				let app = "<tr>"
						+ "		<th>" + (i + 1) + "</th>" 
						+ " 	<td>" + getArrow(item.depth) + "<a href='bbsdetail.html?seq=" + item.seq + "'>" + item.title + "</a></td>"
						+ "		<td>" + item.id + "</td>"
						+ "</tr>";		
						
				$("tbody").append(app);
				
			});		
		}
	});		
}

function getListCount() {	// paging [1][2]

	$.ajax({
		url:"http://localhost:9000/getBbsCount",
		type:"get",
		data:{ "nowPage":0, "recordCountPerPage":10, "choice":$("#choice").val(), "searchWord":$("#searchWord").val() },
		success:function(count){
			alert(count);
			loadPage(count);
		}
	});

}

function loadPage( totalCount ) {
	// 글의 총수
	let pageSize = 10;	// 보여주고 싶은 글의 갯수
	let nowPage = 1;
	
	let totalPages = totalCount / pageSize;	
	//	2				23			10
	if(totalCount % pageSize > 0){
		totalPages++; 
	}
	
	$("#pagination").twbsPagination('destroy');	// 페이지 갱신
	
	$("#pagination").twbsPagination({
	//	startPage: 1,
		totalPages: totalPages,
		visiblePages: 10,
		first:'<span aria-hidden="true">«</span>',
		prev:"이전",
		next:"다음",
		last:'<span aria-hidden="true">»</span>',
		initiateStartPageClick:false,	// onPageClick 자동호출을 하지 않는다
		onPageClick: function(event, page){	// 페이지 버튼을 클릭시
			nowPage = page;
		//	alert('nowPage:' + nowPage);
			getListData( page );
		}	
	});
	
}

function getArrow( depth ) {
	let rs = "<img src='./image/arrow.png' width='20px' height='20'/>";
	let nbsp = "&nbsp;&nbsp;&nbsp;&nbsp;";
	
	let ts = "";
	for(i = 0;i < depth; i++){
		ts += nbsp;
	}
	return depth==0?"":ts + rs;
}
</script>

</body>
</html>

 

 

 

 

 

 

 

 

Spring

 

 

 

 

 

 

 

bbs.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="bit.com.a.dao.BbsDao">

<!-- Bbs List 호 -->
	<select id="getBbsPageList"	parameterType="bit.com.a.dto.BbsParamPage" resultType="bit.com.a.dto.BbsDto">
		SELECT SEQ, ID, REF, STEP, DEPTH, TITLE, CONTENT,
			WDATE, DEL, READCOUNT
		FROM (SELECT ROW_NUMBER()OVER(ORDER BY REF DESC, STEP ASC)AS RNUM,
		  SEQ, ID, REF, STEP, DEPTH, TITLE, CONTENT,
		  WDATE, DEL, READCOUNT 
		  FROM BBS
		  WHERE 1=1	
			  <if test="choice != null and choice != ''
			 		and searchWord != null and searchWord != ''">		 	
			 	<if test="choice == 'title'">
			 		AND TITLE LIKE '%'||#{searchWord}||'%'
			 	</if>
			 	<if test="choice == 'content'">
			 		AND CONTENT LIKE '%'||#{searchWord}||'%'
			 	</if>
			 	<if test="choice == 'writer'">
			 		AND ID LIKE '%'||#{searchWord}||'%'
			 	</if>		 		
			 </if>	  
		 ORDER BY REF DESC, STEP ASC
		  ) A 
		WHERE RNUM BETWEEN ${start} AND ${end}	 
	</select>

<!-- Bbs List Count -->
	<select id="getBbsCount" parameterType="bit.com.a.dto.BbsParamPage" resultType="java.lang.Integer">
		SELECT NVL(COUNT(*), 0)AS CNT
		FROM BBS
		WHERE 1=1
		 <if test="choice != null and choice != ''
		 		and searchWord != null and searchWord != ''">		 	
		 	<if test="choice == 'title'">
		 		AND TITLE LIKE '%'||#{searchWord}||'%'
		 	</if>
		 	<if test="choice == 'content'">
		 		AND CONTENT LIKE '%'||#{searchWord}||'%'
		 	</if>
		 	<if test="choice == 'writer'">
		 		AND ID LIKE '%'||#{searchWord}||'%'
		 	</if>		 		
		 </if>
	</select>
	
	<select id="getBbs" parameterType="java.lang.Integer" resultType="bit.com.a.dto.BbsDto">
		SELECT SEQ, ID, REF, STEP, DEPTH
			TITLE, CONTENT, WDATE, 
			DEL, READCOUNT
		FROM BBS
		WHERE SEQ=#{seq}
	
	</select>
	
</mapper>

 

 

 

 

 

 

 

 

Dao

package bit.com.a.dao;

import java.util.List;

import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;

import bit.com.a.dto.BbsDto;
import bit.com.a.dto.BbsParamPage;

@Mapper
@Repository
public interface BbsDao {

	public List<BbsDto> getBbsPageList(BbsParamPage par);
	
	public int getBbsCount(BbsParamPage par);
	
	public BbsDto getBbs(int seq);
}

 

 

 

 

 

 

Service

package bit.com.a.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import bit.com.a.dao.BbsDao;
import bit.com.a.dto.BbsDto;
import bit.com.a.dto.BbsParamPage;

@Service
@Transactional
public class BbsService {

	@Autowired
	BbsDao dao;
	
	public List<BbsDto> getBbsPageList(BbsParamPage par){
		return dao.getBbsPageList(par);
	}

	public int getBbsCount(BbsParamPage par) {
		int count = dao.getBbsCount(par);
		return count;
	}
	
	public BbsDto getBbs(int seq) {
		return dao.getBbs(seq);
	}
}

 

 

 

 

bbsController

package bit.com.a.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

import bit.com.a.dto.BbsDto;
import bit.com.a.dto.BbsParamPage;
import bit.com.a.service.BbsService;

@RestController
public class BbsController {

	@Autowired
	BbsService service;
	
	@RequestMapping(value="/getBbsPageList", method= {RequestMethod.GET, RequestMethod.POST})
	public List<BbsDto> getBbsPageList(BbsParamPage par){
		System.out.println("BbsController getBbsPageList");
		System.out.println(par.toString());
		
		int sn= par.getNowPage() -1; // 0, 1 , 2
		int start = sn * par.getRecordCountPerPage() + 1;	//1, 11, 21
		int end = (sn + 1) * par.getRecordCountPerPage();	//10, 20, 30
		
		par.setStart(start);
		par.setEnd(end);
		
		List<BbsDto> list = service.getBbsPageList(par);
		
		return list;
	}

	@RequestMapping(value="/getBbsCount", method= {RequestMethod.GET, RequestMethod.POST})
	public int getBbsCount(BbsParamPage par) {
		System.out.println("BbsController getBbsCount");
		
		return service.getBbsCount(par);
	}
	
	@RequestMapping(value="/getBbs", method= {RequestMethod.GET, RequestMethod.POST})
	public BbsDto getBbs(int seq) {
		System.out.println("BbsController getBbs()");
		
		return service.getBbs(seq); 
	}
}

 

 

 

 

 

 

bbsParam

package bit.com.a.dto;

import java.io.Serializable;

public class BbsParamPage implements Serializable {

//search
	private String searchWord;
	private String choice;
	
//paging (plug-in)
	private int nowPage;			//현재 페이지
	private int recordCountPerPage;	//표현할 페이지 
	
	private int start = 1;
	private int end = 10;
	
	public BbsParamPage() {
		// TODO Auto-generated constructor stub
	}

	public BbsParamPage(String searchWord, String choice, int nowPage, int recordCountPerPage, int start, int end) {
		super();
		this.searchWord = searchWord;
		this.choice = choice;
		this.nowPage = nowPage;
		this.recordCountPerPage = recordCountPerPage;
		this.start = start;
		this.end = end;
	}

	public String getSearchWord() {
		return searchWord;
	}

	public void setSearchWord(String searchWord) {
		this.searchWord = searchWord;
	}

	public String getChoice() {
		return choice;
	}

	public void setChoice(String choice) {
		this.choice = choice;
	}

	public int getNowPage() {
		return nowPage;
	}

	public void setNowPage(int nowPage) {
		this.nowPage = nowPage;
	}

	public int getRecordCountPerPage() {
		return recordCountPerPage;
	}

	public void setRecordCountPerPage(int recordCountPerPage) {
		this.recordCountPerPage = recordCountPerPage;
	}

	public int getStart() {
		return start;
	}

	public void setStart(int start) {
		this.start = start;
	}

	public int getEnd() {
		return end;
	}

	public void setEnd(int end) {
		this.end = end;
	}

	@Override
	public String toString() {
		return "BbsParamPage [searchWord=" + searchWord + ", choice=" + choice + ", nowPage=" + nowPage
				+ ", recordCountPerPage=" + recordCountPerPage + ", start=" + start + ", end=" + end + "]";
	}
	
}

 

 

 

 

 

webConfig

package bit.com.a;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

	@Override
	public void addCorsMappings(CorsRegistry registry) {
		registry.addMapping("/**").allowedOrigins("http://localhost:8090");
	}

}

 

 

 

 

 

dataBaseConfig

package bit.com.a;

import javax.sql.DataSource;

import org.apache.ibatis.session.SqlSessionFactory;
import org.mybatis.spring.SqlSessionFactoryBean;
import org.mybatis.spring.SqlSessionTemplate;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.io.Resource;
import org.springframework.core.io.support.PathMatchingResourcePatternResolver;

@Configuration
public class DatabaseConfig {

	@Bean
	public SqlSessionFactory sqlSessionFactory(DataSource ds)throws Exception {
		System.out.println("DatabaseConfig sqlSessionFactory()");
		
		SqlSessionFactoryBean sqlSFB = new SqlSessionFactoryBean();
		sqlSFB.setDataSource(ds);
		
		Resource[] arrRes = new PathMatchingResourcePatternResolver().getResources("classpath:sqls/*.xml");
		sqlSFB.setMapperLocations(arrRes);
		sqlSFB.getObject().getConfiguration().setMapUnderscoreToCamelCase(true);
		
		return (SqlSessionFactory)sqlSFB.getObject();
	}
	
	@Bean
	public SqlSessionTemplate sqlSession(SqlSessionFactory sqlSF) {
		return new SqlSessionTemplate(sqlSF);
	}
}

 

 

 

 

 

 

Application

package bit.com.a;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@MapperScan(basePackages = "bit.com.a")
public class SampleBootProgApplication {

	public static void main(String[] args) {
		SpringApplication.run(SampleBootProgApplication.class, args);
	}

}

 

저작자표시 변경금지

'Spring Boot' 카테고리의 다른 글

파일 업로드 다운로드  (0) 2020.09.28
부트 로그인 들어가기 전~ 기본셋팅  (0) 2020.09.25

'Spring Boot' Related Articles

티스토리툴바