mindol1004/excel-download
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

#16 board : article list page - sort

Browse Source
This commit is contained in:
haerong22
2022-08-17 01:47:31 +09:00
parent d6d1bf9955
commit 079e2ef151
3 changed files with 58 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
board/src/main/resources/static/css/articles/table-header.css Normal file
View File

@@ -0,0 +1,5 @@
/* 게시글 테이블 제목 */
#article-table > thead a {
text-decoration: none;
color: black;
}

9
board/src/main/resources/templates/articles/index.html
View File

@@ -9,6 +9,7 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link href="/css/search-bar.css" rel="stylesheet"> <link href="/css/search-bar.css" rel="stylesheet">
<link href="/css/articles/table-header.css" rel="stylesheet">
</head> </head>
<body> <body>
@@ -59,10 +60,10 @@
<table class="table" id="article-table"> <table class="table" id="article-table">
<thead> <thead>
<tr> <tr>
<th class="title col-6">제목</th> <th class="title col-6"><a>제목</a></th>
<th class="hashtag col-2">해시태그</th> <th class="hashtag col-2"><a>해시태그</a></th>
<th class="user-id col">작성자</th> <th class="user-id col"><a>작성자</a></th>
<th class="created-at col">작성일</th> <th class="created-at col"><a>작성일</a></th>
</tr> </tr>
</thead> </thead>

74
board/src/main/resources/templates/articles/index.th.xml
View File

@@ -3,34 +3,56 @@
<attr sel="#header" th:replace="header :: header" /> <attr sel="#header" th:replace="header :: header" />
<attr sel="#footer" th:replace="footer :: footer" /> <attr sel="#footer" th:replace="footer :: footer" />
<attr sel="#article-table"> <attr sel="main" th:object="${articles}">
<attr sel="tbody" th:remove="all-but-first"> <attr sel="#article-table">
<attr sel="tr[0]" th:each="article : ${articles}"> <attr sel="thead/tr">
<attr sel="td.title/a" th:text="${article.title}" th:href="@{'/articles/' + ${article.id}}" /> <attr sel="th.title/a" th:text="'제목'" th:href="@{/articles(
<attr sel="td.hashtag" th:text="${article.hashtag}" /> page=${articles.number},
<attr sel="td.user-id" th:text="${article.nickname}" /> sort='title' + (*{sort.getOrderFor('title')} != null ? (*{sort.getOrderFor('title').direction.name} != 'DESC' ? ',desc' : '') : '')
<attr sel="td.created-at/time" th:datetime="${article.createdAt}" th:text="${#temporals.format(article.createdAt, 'yyyy-MM-dd')}"/> )}"/>
<attr sel="th.hashtag/a" th:text="'해시태그'" th:href="@{/articles(
page=${articles.number},
sort='hashtag' + (*{sort.getOrderFor('hashtag')} != null ? (*{sort.getOrderFor('hashtag').direction.name} != 'DESC' ? ',desc' : '') : '')
)}"/>
<attr sel="th.user-id/a" th:text="'작성자'" th:href="@{/articles(
page=${articles.number},
sort='userAccount.userId' + (*{sort.getOrderFor('userAccount.userId')} != null ? (*{sort.getOrderFor('userAccount.userId').direction.name} != 'DESC' ? ',desc' : '') : '')
)}"/>
<attr sel="th.created-at/a" th:text="'작성일'" th:href="@{/articles(
page=${articles.number},
sort='createdAt' + (*{sort.getOrderFor('createdAt')} != null ? (*{sort.getOrderFor('createdAt').direction.name} != 'DESC' ? ',desc' : '') : '')
)}"/>
</attr> </attr>
<attr sel="tbody" th:remove="all-but-first">
<attr sel="tr[0]" th:each="article : ${articles}">
<attr sel="td.title/a" th:text="${article.title}" th:href="@{'/articles/' + ${article.id}}" />
<attr sel="td.hashtag" th:text="${article.hashtag}" />
<attr sel="td.user-id" th:text="${article.nickname}" />
<attr sel="td.created-at/time" th:datetime="${article.createdAt}" th:text="${#temporals.format(article.createdAt, 'yyyy-MM-dd')}" />
</attr>
</attr>
</attr>
<attr sel="#pagination">
<attr sel="li[0]/a"
th:text="'previous'"
th:href="@{/articles(page=${articles.number - 1})}"
th:class="'page-link' + (${articles.number} <= 0 ? ' disabled' : '')"
/>
<attr sel="li[1]" th:class="page-item" th:each="pageNumber : ${paginationBarNumbers}">
<attr sel="a"
th:text="${pageNumber + 1}"
th:href="@{/articles(page=${pageNumber})}"
th:class="'page-link' + (${pageNumber} == ${articles.number} ? ' disabled' : '')"
/>
</attr>
<attr sel="li[2]/a"
th:text="'next'"
th:href="@{/articles(page=${articles.number + 1})}"
th:class="'page-link' + (${articles.number} >= ${articles.totalPages - 1} ? ' disabled' : '')"
/>
</attr> </attr>
</attr> </attr>
<attr sel="#pagination">
<attr sel="li[0]/a"
th:text="'previous'"
th:href="@{/articles(page=${articles.number - 1})}"
th:class="'page-link' + (${articles.number} <= 0 ? ' disabled' : '')"
/>
<attr sel="li[1]" th:class="page-item" th:each="pageNumber : ${paginationBarNumbers}">
<attr sel="a"
th:text="${pageNumber + 1}"
th:href="@{/articles(page=${pageNumber})}"
th:class="'page-link' + (${pageNumber} == ${articles.number} ? ' disabled' : '')"
/>
</attr>
<attr sel="li[2]/a"
th:text="'next'"
th:href="@{/articles(page=${articles.number + 1})}"
th:class="'page-link' + (${articles.number} >= ${articles.totalPages - 1} ? ' disabled' : '')"
/>
</attr>
</thlogic> </thlogic>