반응형
modal + datatable 구현
<!-- imports -->
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<style>
...
<!-- 모달 전체 CSS -->
#modal.modal-overlay {
width: 100%;
height: 100%;
position: absolute;
left: 5%;
top: 5%;
display: none;
flex-direction: column;
<!-- 모달위치 정렬값 -->
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.25);
<!-- 주변 쉐도잉 -->
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(1.5px);
-webkit-backdrop-filter: blur(1.5px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
}
<!-- 모달창에 대한 CSS -->
#modal .modal-window {
background: rgba( 255, 255, 255, 100 ); //==white
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 0% );
-webkit-backdrop-filter: blur( 0% );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
width: 70%;
height: 60%;
position: relative;
top: 5%;
margin-left: 3%;
}
#modal .close-area {
display: inline;
float: right;
margin-right: 5%;
cursor: pointer;
color: black;
}
#modal .content {
margin-top: 3%;
margin-left: 5%;
margin-right: 5%;
color: white;
}
</style>
<body class="mod-bg-1">
...
<!-- 참석/퇴장 시간 확인 -->
<div id="modal" class="modal-overlay">
<div class="modal-window">
<div class="title">
</div>
<form>
<div class="close-area">X</div>
<div class="content">
<!-- class : 테이블 선 표시, 표 깨짐 방지(이거 안하면 표 column값이 들쑥날쑥해짐) / style : 최소 너비 정의(이거 안하면 표만 좌측정렬됨) -->
<table id="inoutTimeTable" class="table table-sm table-bordered table-hover table-striped w-100" style="min-width:1100px;">
<thead class="text-center">
<tr>
<th style="column-width: 110px">회의번호</th>
<th style="column-width: 110px">등록전화번호</th>
<th style="column-width: 110px">로그번호</th>
<th style="column-width: 110px">인입전화번호</th>
<th style="column-width: 110px">참여자이름</th>
<th style="column-width: 110px">pin번호</th>
<th style="column-width: 110px">참여시간</th>
<th style="column-width: 110px">종료시간</th>
<th style="column-width: 110px">사용시간</th>
</tr>
</thead>
</table>
</div>
</form>
</div>
</div>
...
<script>
...
</script>
</body>
</html>mysql 시간차 변환 쿼리
SELECT confNum, CRUD_DEC(phone,'ONOFF_PHONE') as phone
, logno, custCID, custNm, pin
,DATE_FORMAT(joinDt, '%Y-%m-%d %H:%i:%s') as joinDt
,DATE_FORMAT(quitDt, '%Y-%m-%d %H:%i:%s') as quitDt
,TIME_FORMAT(sec_to_time(timestampdiff(second,joinDt ,quitDt)) , '%i분 %s초') as gap
FROM tb200031
WHERE confNum = #{confNum}
ORDER BY phone, logno asctimestampediff(계산기준, 시작시간, 종료시간) => 시작시간~종료시간을 계산 기준에 따라 차이를 계산해줌
계산 기준 : second / minute / hour / day / wee / month / quarter / year
sec_to_time은 표현된 시간을 초로 계산해줌
time_format은 시간을 요청하는 형태로 변환해줌
date_format은 시간을 요청하는 형태로 날짜를 포함해 표현해줌
| %Y | 연 | 4자리 연도 |
| %y | 연 | 2자리 연도 |
| %m | 월 | 2자리 (00-12) |
| %c | 월 | 1자리, 10보다 작을경우 (1-12) |
| %M | 월 | 이름(January, February…) |
| %b | 월 | 줄인 이름(Jan, Feb…) |
| %d | 일 | 2자리 (00-31) |
| %e | 일 | 1자리, 10보다 작을경우 (0-31) |
| %D | 일 | 1st, 2nd… |
| %H | 시 | 24시간 형식 (00-23) |
| %h | 시 | 12시간 형식 (01-12) |
| %I | 시 | 12시간 형식 (01-13) |
| %k | 시 | 24시간 형식, 10보다 작을경우 한자리 (0-23) |
| %l | 시 | 12시간 형식, 10보다 작을경우 한자리 (1-12) |
| %i | 분 | 2자리 (00-59) |
| %S | 초 | 2자리 (00-59) |
| %s | 초 | 2자리 (00-59) |
| %f | 마이크로초 | 100만분의 1초 |
| %p | 오전/오후 | AM/PM |
| %T | 시분초 | 24시간 형식 (hh:mm:ss) |
| %r | 시분초 오전/오후 | 12시간 형식 (hh:mm:ss AM/PM) |
| %j | 일 | 그해의 몇번째 일인지 표시 (001-366) |
| %w | 일 | 그주의 몇번째 일인지 표시 (0=일요일, 6=토요일) |
| %W | 주 | 이름(Monday,Tuesday…) |
| %a | 주 | 줄인 이름(Mon,Tue…) |
| %U | 주 | 그해의 몇번째 주인지 표시 (00-53) 일요일이 주의 첫번째일 |
| %u | 주 | 그해의 몇번째 주인지 표시 (00-54) 월요일이 주의 첫번째일 |
| %X | 연 | 그주가 시작된 해을 표시, %V와 같이 사용 |
| %x | 연 | 그주가 시작된 해을 표시, %v와 같이 사용 |
| %V | 주 | 그주가 시작된 해의 몇번째 주인지 표시 (01-53) |
| 일요일이 주의 첫번째일 %X 와 함께사용 | ||
| %v | 주 | 그주가 시작된 해의 몇번째 주인지 표시 (01-53) |
| 월요일이 주의 첫번째일 %x 와 함께사용 |
반응형
'Frontend > jQuery & JSTL' 카테고리의 다른 글
| [jQuery] ajax를 이용한 Controller로 값 전달 (0) | 2023.10.17 |
|---|---|
| [jQuery] Uncaught TypeError: Cannot read properties of undefined (reading 'classList') (0) | 2023.10.10 |
| table data row이벤트 처리 (0) | 2023.09.26 |
| [JSTL] jsp를 포함하는 jsp구성 (0) | 2023.09.18 |
| JSP에서 JSP로 데이터 전달 (0) | 2023.09.12 |
