韓日

頁nation(2)

タイトル検索

ページ名(2)

ページ移動、ポイントカラー

- list.html -
ページ番号をクリックして該当するページに移動し、現在のページ番号に色を追加する機能を追加します.

<li class="page-item" th:classappend="${pmk.cri.pageNum == number} ? 'active' : '' " th:each="number : ${#numbers.sequence(pmk.startPage, pmk.endPage)}">
  <a class="page-link" th:href="@{/board/list} + '?pageNum=__${number}__'" th:text="${number}"></a>
</li>

th:href="@{/board/list} + '?pageNum=__${number}__'":現在のページ番号が動的に入力されます.
parameterに渡すため、?pageNum=以降に値を入力する必要があります.ダイナミックデータの内部にダイナミックデータが含まれているため、__${number}__として入力する必要があります.th:classappend="${pmk.cri.pageNum == number} ? 'active' : '' ":現在のページ(pagenum)が重複文の数と同じ場合はクラスにactiveを追加し、異なる場合は空の3つの演算子
=>ページ名の現在のページにのみactiveクラスを拡大して色を追加します.

矢印に移動

- list.html -
左右の矢印を押すと

<ul class="pagination pagination-primary justify-content-center mt-5">
  <li class="page-item" th:if="${pmk.prev}">
    <a class="page-link" th:href="@{/board/list} + '?pageNum=__${pmk.startPage - 1}__'" aria-label="이전">
      <span class="material-icons"> keyboard_arrow_left </span>
      <span class="sr-only">이전</span>
    </a>
  </li>
  <li class="page-item" th:classappend="${pmk.cri.pageNum == number} ? 'active' : '' " th:each="number : ${#numbers.sequence(pmk.startPage, pmk.endPage)}">
    <a class="page-link" th:href="@{/board/list} + '?pageNum=__${number}__'" th:text="${number}"></a>
  </li>
  <li class="page-item" th:if="${pmk.next}">
    <a class="page-link" th:href="@{/board/list} + '?pageNum=__${pmk.endPage + 1}__'" aria-label="다음">
      <span class="material-icons"> keyboard_arrow_right </span>
      <span class="sr-only">다음</span>
    </a>
  </li>
</ul>

startPage:開始ページ(現在のページナビゲーションバーの最初の数値)endPage:終了ページ(現在のページナビゲーションバーの最後の数値)#numbers.sequence(시작숫자, 끝숫자):Thymeleafの構文は、シーケンスを使用せずに、開始数から終了数まで任意の数を繰り返すために使用されます.なお、#numbersまでは、文法に含まれている.
Tymelafの番号。sequence th:if="${pmk.prev}" pmkで.prevがいるときだけliラベルが見えます.
=>モデルパッケージのPageMackerDTOクラスでprev、nextを求める場合、startPageが1endPage以下であればrealEnd以上であればfalseが返されるため、if文にはliタグは表示されません.

見出しの検索

検索キーの追加

新しいメソッドを作成せずに既存のメソッドにキーワードを追加します.
- Criteria -

private String keyword;	// 검색어 키워드
// get/set, toString 메서드 자동생성

- BoardMapper.xml -

<!-- 게시판 목록 (페이징) : skip과 amount는 Criteria 객체에서 입력됨 -->
<select id="getListPaging" resultType="BoardVO">
	SELECT * FROM (
			SELECT bno, title, writer, regdate, updatedate
			FROM board
			<if test="keyword != null">
				WHERE title LIKE concat('%', #{keyword}, '%')
			</if> 
			 ORDER BY bno DESC) as T1
	LIMIT #{skip}, #{amount}
</select>

<!-- 게시글 총 갯수 -->
<select id="getTotal" resultType="int">
	SELECT count(*) FROM board
		<if test="keyword != null">
			WHERE title LIKE concat('%', #{keyword}, '%')
		</if> 
</select>

ページング時に値が検索された場合は、検索結果を使用してページングする必要があります.
検索した投稿の合計数が検索結果と同じ場合は、投稿の合計数を計算するだけです.<if test="keyword != null"> WHERE title LIKE concat('%', #{keyword}, '%') </if>:入力されたkeywordに値がある場合のみ、WHEREによって自動的に条件が指定されます.concat('%', #{keyword}, '%')は文字列の関数です.入力したキーワードが、タイトルの先頭、中央、末尾のいずれかの場所で検索結果に上書きされることを確認します.
結果例-%吉%、%釜山%
- BoardMapper.interface -

public int getTotal(Criteria cri);	// 게시글 총 갯수

- BoardService.interface -

public int getTotal(Criteria cri);	// 게시글 총 갯수

- BoardServiceImpl -

@Override
public int getTotal(Criteria cri) {
	return boardMapper.getTotal(cri);
}

- BoardController -

// 게시글 목록 페이지 (페이징 적용)
@GetMapping("/list")
public String boardListGet(Criteria cri, Model model) {
	// boardList에 페이징 된 모든 게시글을 전달
	model.addAttribute("boardList", boardService.getListPaging(cri));
	
	int total = boardService.getTotal(cri);
	PageMakerDTO pmk = new PageMakerDTO(total, cri);	// 객체 생성 시 모든 변수 계산됨
	
	model.addAttribute("pmk", pmk);		// 페이지네이션을 위한 pmk객체 전달
	
	return "list";
}

キーワードが検索されると、ページングが必要なすべての部分がCriteriaオブジェクトに変わります.

ビュー内の検索ウィンドウの作成

- list.html-
検索ウィンドウをtableラベルの末尾に追加し、ページ名に続く

<!-- 검색창 -->
<div class="d-flex justify-content-center mt-3">
  <div class="w-md-25 w-sm-50 input-group input-group-outline is-filled">
    <label class="form-label">search here...</label>
    <input type="text" id="searchKeyword" th:value="${pmk.cri.keyword}" class="form-control" />
    <button id="searchButton" class="btn btn-primary mb-0">검색</button>
  </div>
</div>

th:value="${pmk.cri.keyword}"は、検索結果が出た後も検索されたキーワードを保持するために追加されたものである.
JavaScriptによる検索時にパラメータに渡す機能
- list.html-

<script>
  document.getElementById('pageName').textContent = '게시판 목록';

  const searchKeyword = document.getElementById('searchKeyword'); // 키워드 입력창의 값(내용)
  const searchButton = document.getElementById('searchButton'); // 검색버튼

  // 검색버튼을 눌렀을 때(이벤트 'click') 키워드를 url에 추가하여 보내면 됨
  searchButton.addEventListener('click', function () {
    let keyword = ''; // 키워드가 있을 경우 키워드 추가
    let currentKeyword = searchKeyword.value.trim();
    if (currentKeyword) keyword = '&keyword=' + currentKeyword; // 키워드가 있을 경우 '&keyword=키워드'
    location.href = '/board/list?pageNum=1' + keyword; // 처음 키워드로 검색 시 무조건 1페이지를 보여줌
  });
</script>

検索入力がlet currentKeyword = searchKeyword.value.trim();のキーワードの値が入力されますが、トリミングにより空白入力が除外されます.この値は重複しているので、変数として使用するように指定します.
キーワードcurrentKeywordの値がスペースを削除すると、&keyword=키워드がキーワードに保存されます.location.hrefは、JavaScriptにおいてアドレスによるページ移動を行う際に用いられる関数である.
最終アドレス例-http://localhost:8080/board/list?pageNum=1&keyword=10
検索機能では、検索結果のページ名の番号をクリックすると、リスト全体の番号をクリックするのと同じになります.
Yes-検索後、「2ページ目」>「2ページ目全体」をクリックします.

ページ名の変更

「≪ページ名|Page Name|emdw≫」ボタンでページを移動するときにキー値を保持するには、「≪ページ名|Page Name|emdw≫」にキーを追加する必要があります.
今回もJavaScriptで処理
- list.html-

// 페이지네이션의 a태그들을 전부 자바스크립트 요청으로 바꾸기 (키워드 추가)
const pageLinks = document.querySelectorAll('ul.pagination .page-link');
pageLinks.forEach(function (link) {
  // 각각의 a태그를 클릭했을 때 함수 실행
  link.addEventListener('click', function (e) {
    e.preventDefault(); // a태그의 이동 요청이 취소됨
    let keyword = ''; // 키워드가 있을 경우 키워드 추가
    let currentKeyword = searchKeyword.value.trim();
    if (currentKeyword) keyword = '&keyword=' + currentKeyword; // 키워드가 있을 경우 '&keyword=키워드'
    location.href = this.getAttribute('href') + keyword; // 클릭한 a태그의 주소에 + keyword를 해준 후 요청함
  });
});

const pageLinks = document.querySelectorAll('ul.pagination .page-link');:ページ名のすべてのボタンを選択(矢印を含む)function(e)のe.preventDefault();を使用して、aタグ内のイベントオブジェクトeの実行を停止します.
aタグの機能は、アドレスの移動を停止することであるため、必要なアドレスに移動するように変更することができる.this.getAttribute('href'):現在クリックしているaタグのアドレスを取得location.href = this.getAttribute('href') + keyword;:1つのアドレスにキーワードを追加するaラベルを要求する

検索10時

ページ・ナビゲーション・バーで、2ページ目をクリックしてもキーは保持され、通常のアドレスhttp://localhost:8080/board/list?pageNum=2&keyword=10に移動したことを確認します.

詳細ページにキーワードを保持

「記事の詳細の公開」ページ(get.htmlページ)で、リストボタンをクリックしてキーワード検索を解放します.
したがって、詳細ビューページにキーワードを渡します.この場合、キーワードのみが渡され、ページは無条件に1を返します.
この問題を解決するには、正常に動作するには、キーワード(検索語)と同時にpageNum(現在のページ番号)を渡す必要があります.tbodyラベル内のタイトルを出力するaラベルにはclass="title"が付与される.
- list.html -

// 제목 a태그들을 선택해서 a태그이동을 취소하고 keyword를 추가하여 요청
const getLinks = document.querySelectorAll('table .title');
getLinks.forEach(function (link) {
  // 각각의 a태그를 클릭했을 때 함수 실행
  link.addEventListener('click', function (e) {
    e.preventDefault(); // a태그의 이동 요청이 취소됨
    let keyword = ''; // 키워드가 있을 경우 키워드 추가
    let currentKeyword = searchKeyword.value.trim();
    if (currentKeyword) keyword = '&keyword=' + currentKeyword; // 키워드가 있을 경우 '&keyword=키워드'
    let pageNum = document.querySelector('.active a').textContent;
    location.href = this.getAttribute('href') + keyword + '&pageNum=' + pageNum;
  });
});

導入可能[[${pmk.cri.pageNum}]]- get.html-

<a th:href="@{/board/list} + '?pageNum=__${cri.pageNum}__'" class="btn btn-success">목록</a>
<a th:href="@{/board/modify(bno=${board.bno})} + '&pageNum=__${cri.pageNum}__'" class="btn btn-secondary">수정</a>

getページでもキーワードやpageNumを変更できます.
- BoardController -

@GetMapping("/get")
public String boardPageGet(@RequestParam("bno") int bno, Model model, Criteria cri) {
	model.addAttribute("board", boardService.getPage(bno));
	model.addAttribute("cri", cri);
	return "get";
}

// 수정페이지 출력
@GetMapping("/modify")
public String boardModifyGet(@RequestParam("bno") int bno, Model model, Criteria cri) {
	model.addAttribute("board", boardService.getPage(bno));
	model.addAttribute("cri", cri);
	return "modify";
}

パラメータに投稿を追加して、[パブリッシュ](Publish)ページと[修正](Modify)ページにジャンプしたときにCriteriaオブジェクトを移動できるようにします.
criオブジェクトを後続のモデルオブジェクトに追加し、戻るページに一緒に移動します.
- get.html-

// a태그들에 keyword를 추가해서 자바스크립트로 요청함
  const links = document.querySelectorAll('a.page');
  links.forEach(function (link) {
    // 각각의 a태그를 클릭했을 때 함수 실행
    link.addEventListener('click', function (e) {
      e.preventDefault(); // a태그의 이동 요청이 취소됨
      let keyword = '[[${cri.keyword}]]';
      location.href = this.getAttribute('href') + '&keyword=' + keyword; // 클릭한 a태그의 주소에 + keyword를 해준 후 요청함
    });
  });

テスト

検索結果が2ページを超えるキーワードを検索し、1ページ以外の投稿をクリックします.

「投稿詳細」ページ(get.html)で、リストボタンをクリックします.

リストページ(list.html)で以前に検索したキーワードを、最初のページに戻らずに元のページに残すだけで完了します.