인턴 Day06 (datatables)

0. Day06

- 배운 것 

1. Datatables

 

1. datatables 

직접 페이징을 구현해도 되지만 datatables를 사용하면 편리하게 검색 기능과 페이징 기능을 추가할 수 있다. 

 

공식 사이트: https://datatables.net/

참고 사이트: DataTables 사용법 및 예제 jQuery, JSON (tistory.com)

<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<h2 class="pb-2 border-bottom">공감공간</h2><br/>
<table id="example" class="display">
    <thead>
    <tr>
        <th>No</th>
        <th>주제</th>
        <th>제목</th>
        <th>작성자</th>
        <th>작성 시간</th>
    </tr>
    </thead>
    <tbody>
     <c:forEach items="${list}" var = "list">
	    <tr >
	        <td><c:out value="${list.bno}" /></td>
	        <td><c:out value="${list.theme}" /></td>
	        <td><a href="/board/readView?bno=${list.bno}"><c:out value="${list.title}"/></a></td>
	        <td><c:out value="${list.writer}" /></td>
	        <td><c:out value="${list.modifiedDate}" /></td>
	    </tr>
    </c:forEach>
   
</table>

 <c:choose>  
 <c:when test="${null != memberDTO}">
<div>
<button type="submit" id="write_btn" class="btn btn-dark">글쓰기</button> </div> <br>
</c:when>  
</c:choose>  

</main>
 
       <script>
        $().ready(function() {
            $('#example').DataTable(
            		{
            			  order: [[0, 'desc']],
            			  ordering: true,
            			  serverSide: false
       		});
         
	         $("#write_btn").on("click", function(){
	            event.preventDefault();
	            location.href = "/board/writeView";
	         })
	         
      })
   
   </script>