고정 헤더 영역
상세 컨텐츠
본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>출석체크</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- 엑시콘 아이콘추가 -->
<link rel="stylesheet" type="text/css" href="XEIcon-2.2.0/xeicon.css" />
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL+Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h+eCIAZHPXcpZaNw==" crossorigin="anonymous" /> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/dataTables.bootstrap4.min.css" integrity="sha512-PT0RvABaDhDQugEbpNMwgYBCnGCiTZMh9yOzUsJHDgl/dMhD9yjHAwoumnUk3JydV3QTcIkNDuN40CJxik5+WQ==" crossorigin="anonymous" />
<script src="//cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- 학습토그해당스타일 -->
<style>
*:focus {
box-shadow: none !important;
}
.status-box {
width: 100px;
border: 0;
padding: 5px;
}
div.dataTables_wrapper div.dataTables_paginate {
text-align: center;
}
.paginate_button.current {
z-index: 3;
color: #fff;
background-color: #556ee6;
border-color: #556ee6;
}
.paginate_button {
cursor: pointer;
padding: 10px;
position: relative;
display: inline-block;
padding: 0.5rem 0.75rem;
margin-left: -1px;
line-height: 1;
min-height: 30px;
color: #74788d;
background-color: #fff;
border: 1px solid #ced4da;
}
.class-progress-wrap .progress {
height: 40px;
border-radius: 0;
align-items: center;
background: transparent;
}
.class-progress-wrap .progress-bar {
height: 80%;
transition: 0.2s ease;
cursor: pointer;
}
.class-progress-wrap .progress-bar:hover {
height: 100%;
transform: scale(1.1);
}
.progress-result li {
display: flex;
align-items: center;
font-size: 16px;
width: 160px;
}
.progress-result li a {
display: block;
cursor: pointer;
text-decoration: underline !important;
color: #555;
}
.progress-result li .num {
width: 40px;
margin-left: 10px;
font-weight: 500;
}
.progress-result label {
margin-bottom: 0;
margin-left: 5px;
font-weight: 400;
}
.progress-result input {
width: 60px;
border: none;
color: #222;
}
.class-table thead th i {
color: #999;
}
.class-table tr td .progress {
height: 20px;
border-radius: 0;
position: relative;
background: #c5c5c5;
}
.class-table tr td .progress .pg-text {
position: absolute;
transform: translateX(-50%);
left: 50%;
top: 10%;
color: #fff;
}
.class-table tr td .badge {
display: block;
line-height: inherit;
}
.class-table tr th .xi-long-arrow-down {
float: right;
margin-top: 5px;
}
.comment-btn i {
vertical-align: middle;
color: #ddd;
}
.comment-btn.active i {
color: #556ee6;
}
.fa-star {
color: #ddd;
}
.fa-star.on {
color: #f1b44c;
}
/* .badge-secondary {
color: #fff;
background-color: #ddd;
} */
.page-link {
position: relative;
display: block;
padding: 0.5rem 0.75rem;
margin-left: -1px;
line-height: 1;
min-height: 30px;
color: #74788d;
background-color: #fff;
border: 1px solid #ced4da;
}
.table {
border-top: 2px solid #999;
border-bottom: 2px solid #ddd;
}
/* .table tr th:first-child {
border-right: 1px solid #ced4da;
} */
.table tr th,
.table tr td {
vertical-align: middle;
border-top: 1px solid #ced4da;
border-bottom: 1px solid #ced4da;
}
.star-rating {
letter-spacing: -1px;
}
.table-active th {
padding: 0 5px;
}
</style>
</head>
<body>
<main>
<div class="main-content">
<div class="page-content">
<!-- Start content -->
<div class="container-fluid">
<div class="row">
<div class="col-xl-12 mb-3">
<div class="card">
<div class="card-body">
<!-- 클래스 셀렉트바-->
<div class="select-group row mb-3">
<div class="col-6">
<form class="form-inline formSearchBox mb-3">
<label for="selectClass" class="mr-3">클래스</label>
<select id="selectClass" class="form-control mr-4" style="min-width: 200px">
<option selected="">우리반</option>
<option>...</option>
</select>
</form>
</div>
<div class="col-6">
<ul class="list-inline user-chat-nav text-right mb-0">
<li class="list-inline-item d-none d-sm-inline-block">
<h5>
<span class="badge badge-dark">실시간</span>
<span class="badge text-secondary"
>2020.11.19.10:56 기준
<button type="reset" class="btn p-0" title="새로고침">
<i class="xi xi-undo xi-x"></i>
</button>
</span>
</h5>
</li>
</ul>
</div>
</div>
<!-- 수강제목과 기간 -->
<h3 class="class-title mb-3">취미 클래스</h3>
<div class="form-inline position-relative">
<div class="input-group-prepend">
<span class="input-group-text border-0 bg-transparent px-0 mr-2">수업기간:</span>
</div>
<input aria-label="First name" class="form-control start-date" id="startDate" class="form-control" value="2020-11-17" readonly />
</div>
<!-- 진행 비율 -->
<div class="class-progress-wrap">
<div class="progress mt-3 mb-3">
<div class="progress-bar bg-warning font-size-13 array1" role="progressbar" aria-valuenow="0" aria-valuemin="0"></div>
<div class="progress-bar bg-success font-size-13 array2" role="progressbar" aria-valuenow="0" aria-valuemin="0"></div>
<div class="progress-bar font-size-13 array3" role="progressbar" aria-valuenow="0" aria-valuemin="0"></div>
</div>
</div>
<!-- 진행 텍스트 -->
<div class="progress-result mt-4">
<ul class="input-group p-0">
<li>
<i class="fa fa-users" aria-hidden="true"></i>
<a href="#" class="array-all"> <label>수강인원</label><span class="num"></span> </a>
</li>
<li>
<i class="fa fa-circle text-warning" aria-hidden="true"></i>
<a href="#" class="array1"> <label>결석</label><span class="num"></span> </a>
</li>
<li>
<i class="fa fa-circle text-success" aria-hidden="true"></i>
<a href="#" class="array2"> <label>출석</label><span class="num"></span> </a>
</li>
<li>
<i class="fa fa-circle text-primary" aria-hidden="true"></i>
<a href="#" class="array3"> <label>지각</label><span class="num"></span> </a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 mb-5">
<div class="card">
<div class="card-body pb-4">
<div class="datatable_wrapper">
<div class="row">
<div class="mt-2 col-sm-12">
<div class="table-responsive">
<table class="table text-center class-table">
<thead>
<tr role="row" class="table-active">
<th>No</th>
<th>학년</th>
<th>반</th>
<th>번호</th>
<th style="min-width: 70px">이름</th>
<th style="min-width: 100px">진도율</th>
<th>학습 횟수</th>
<th>학습 시간</th>
<th style="min-width: 100px">최근 학습일</th>
<th style="width: 60px">출석현황</th>
<th style="min-width: 100px">자기 평가</th>
<th>학생의견</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- content -->
</div>
</div>
</main>
<!-- 모달창 -->
<!-- 강의별 현황 -->
<div class="modal fade" id="classPerBox" tabindex="-1" role="dialog" aria-labelledby="classPer" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document" style="max-width: 1200px">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="classPer"><i class="xi xi-user-address xi-x mr-1"></i>강의별 현황</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table class="table text-center">
<thead>
<tr class="text-center table-active">
<th colspan="4">수업명 : 사회 2차시</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="table-active" width="25%">이름</th>
<td width="25%" class="pername">이동윤</td>
<th scope="row" class="table-active" width="25%">학년</th>
<td width="25%">3</td>
</tr>
<tr>
<th scope="row" class="table-active">반</th>
<td class="perclass">2</td>
<th scope="row" class="table-active">번호</th>
<td class="perclassnum">1</td>
</tr>
</tbody>
</table>
<table class="table text-center mt-3">
<thead>
<tr class="table-active">
<th width="20%">강의명</th>
<th>진도율</th>
<th>인터랙션 참여율</th>
<th>학습 횟수</th>
<th>학습시간</th>
<th>최근 학습일</th>
<th>출석 현황</th>
<th>자기 평가</th>
<th>학생 의견</th>
</tr>
</thead>
<tbody>
<tr>
<td>01강 역사의 의미와 역사 학습의 목적, 세계의 선사 문화와 고대 문명(1)</td>
<td>100%</td>
<td>80%</td>
<td>2회</td>
<td>25분</td>
<td>2021-02-24 10:25</td>
<td>수강중</td>
<td>미참여</td>
<td>-</td>
</tr>
<tr>
<td>02강 국회</td>
<td>60%</td>
<td>80%</td>
<td>1회</td>
<td>20분</td>
<td>2021-02-24 10:25</td>
<td>수강중</td>
<td>미참여</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- 학생 의견 -->
<div class="modal fade" id="classCommentBox" tabindex="-1" role="dialog" aria-labelledby="classComment" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document" style="max-width: 780px">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="classComment"><i class="xi xi-comment xi-x mr-1"></i>학생 의견</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table class="table text-center">
<thead>
<tr class="text-center table-active">
<th colspan="4">수업명 : 사회 2차시</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="table-active" width="25%">이름</th>
<td width="25%">이동윤</td>
<th scope="row" class="table-active" width="25%">학년</th>
<td width="25%">3</td>
</tr>
<tr>
<th scope="row" class="table-active">반</th>
<td>2</td>
<th scope="row" class="table-active">번호</th>
<td>1</td>
</tr>
</tbody>
</table>
<table class="table text-center mt-3">
<thead>
<tr class="table-active">
<th width="30%">강의명</th>
<th width="135px">자기 평가</th>
<th>학생 의견</th>
</tr>
</thead>
<tbody>
<tr>
<td>01강 역사의 의미와 역사 학습의 목적, 세계의 선사 문화와 고대 문명(1)</td>
<td class="star-rating">
<img src="star-4.svg" alr="4점" />
<span class="sr-only">4점</span>
</td>
<td>-</td>
</tr>
<tr>
<td>02강 국회</td>
<td class="star-rating">
<img src="star-5.svg" alr="5점" />
<span class="sr-only">5점</span>
</td>
<td>감사합니다! 이부분이 너무 이해 안가서 답답했는데, 알려주셔서 감사해요 선생님!</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- //모달창 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js" integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg==" crossorigin="anonymous"></script>
<!-- dataTable pdf/exel 버튼 생성 및 다운로드시 필요함 -->
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<!-- pdf를 만등주기 위한 pdfmake js 파일 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<!-- 한글의 깨짐을 해결하기 위한 js 파일 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<!-- 달력 -->
<script src="http://new.1gram.cc/cms/assets/libs/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript">
$.fn.datepicker.dates['kr'] = {
days: ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일', '일요일'],
daysShort: ['일', '월', '화', '수', '목', '금', '토', '일'],
daysMin: ['일', '월', '화', '수', '목', '금', '토', '일'],
months: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
monthsShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
};
$(document).ready(function () {
var $startDate = $('#startDate');
var $endDate = $('#endDate');
var $startDateVal = $('#startDate').val();
var $endDateVal = $('#endDate').val();
var $containerStart = $('.docs-datepicker-container start');
var $containerEnd = $('.docs-datepicker-container end');
var $trigger = $('.datepicker-btn');
$startDate.datepicker({
format: 'yyyy-mm-dd',
language: 'kr',
startDate: '$startDateVal',
});
$endDate.datepicker({
format: 'yyyy-mm-dd',
language: 'kr',
startDate: '$endDateVal',
});
//From의 초기값을 오늘 날짜로 설정
//2개달력모달보이기
$trigger.on('click', function () {
$('.datepicker-box').toggleClass('show');
$startDate.datepicker();
$endDate.datepicker();
});
$('.datepicker-box .close-btn').on('click', function () {
$('.datepicker-box').toggleClass('show');
});
});
</script>
<!-- //달력 -->
<!-- 데이타테이블 -->
<script type="text/javascript" src="./arrays.js"></script>
<script>
$(document).ready(function () {
// 상단그래프
var all = $('.array-all');
var process = $('.class-progress-wrap');
var array1 = $('.array1');
var array2 = $('.array2');
var array3 = $('.array3');
var num = $('.num');
var array1Num = 4;
var array2Num = 12;
var array3Num = 5;
var allNum = array1Num + array2Num + array3Num;
all.find(num).text(allNum + '명');
array1.find(num).text(array1Num + '명');
array2.find(num).text(array2Num + '명');
array3.find(num).text(array3Num + '명');
process.find(array1).text('결석' + array1Num + '명');
process.find(array1).css('width', (array1Num / allNum) * 100 + '%');
process.find(array2).text('출석' + array2Num + '명');
process.find(array2).css('width', (array2Num / allNum) * 100 + '%');
process.find(array3).text('지각' + array3Num + '명');
process.find(array3).css('width', (array3Num / allNum) * 100 + '%');
$('.array-all').on('click', function () {
// classTable.button('.buttons-pdf').trigger();
classTable.column(10).search('').draw();
});
array1.on('click', function () {
classTable.column(10).search('결석').draw();
});
array2.on('click', function () {
classTable.column(10).search('출석').draw();
});
array3.on('click', function () {
classTable.column(10).search('지각').draw();
});
const classTable = $('.class-table').DataTable({
data: dataSet,
columns: [
{ data: 'No', sortable: true, searchable: false },
{ data: '학년', sortable: true, searchable: false },
{ data: '반', sortable: true, searchable: false },
{ data: '번호', sortable: true, searchable: false },
{
data: '이름',
searchable: true,
searchable: true,
render: function (data, type, full, meta) {
return '<a href="#none" title="강의별 현황" data-toggle="modal" data-target="#classPerBox" data-whatever="' + data + '">' + data + '</a>';
},
},
{
data: '진도율',
searchable: false,
render: function (data, type, full, meta) {
return '<div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="' + data + '" style="width:' + data + '%" ></div><span class="font-size-13 pg-text">' + data + '%</span></div>';
},
},
{ data: '학습 횟수', searchable: false },
{ data: '학습 시간', searchable: false },
{ data: '최근 학습일', searchable: false },
{
data: '출석 현황',
sortable: false,
},
{
data: '자기 평가',
sortable: false,
searchable: false,
render: function (data, type, full, meta) {
return '<div class="star-rating" data-rate="' + data + '">' + '<img src="star-' + data + '.svg" alr="' + data + '점">' + '<span class="sr-only">' + data + '점</span></div>';
},
},
{
data: '학생의견',
sortable: false,
searchable: false,
render: function (data, type, full, meta) {
if (data === 'true') {
return '<a href="#none" class="comment-btn active" title="학생의견" data-toggle="modal" data-target="#classCommentBox">' + '<i class="xi xi-comment xi-x" alt="학생의견"></i></a>';
} else {
return '<a href="#none" class="comment-btn" title="학생의견">' + '<i class="xi xi-comment xi-x" alt="학생의견"></i></a>';
}
},
},
],
dom: '<"float-left mb-2"f><"float-right mb-2"B>rt<"bottom mt-2"lp><"clear">',
order: [],
language: {
emptyTable: '데이터가 없어요.',
infoEmpty: '데이터 없음',
infoFiltered: '( _MAX_건의 데이터에서 필터링됨 )',
search: '',
zeroRecords: '일치하는 데이터가 없어요.',
loadingRecords: '로딩중...',
processing: '잠시만 기다려 주세요...',
lengthMenu: ' _MENU_ ',
paginate: {
previous: '<',
next: '>',
},
},
buttons: [
{
extend: 'excel',
text: '<i class="xi xi-download xi-x mr-1"></i> Excel 일괄다운로드',
filename: 'excel 파일명',
title: '엑셀파일 안에 쓰일 제목',
},
{
extend: 'pdfHtml5',
text: ' <i class="xi xi-download xi-x mr-1"></i> PDF 일괄다운로드',
filename: 'pdf 파일명',
title: 'pdf파일 안에 쓰일 제목',
CharSet: 'utf8',
PdfSize: 'letter',
Bom: 'true',
},
],
});
$('.buttons-excel').addClass('btn btn-success waves-effect waves-light');
$('.buttons-pdf').addClass('btn btn-danger waves-effect waves-light');
$('.dataTables_filter input').removeClass('form-control-sm');
$('.dataTables_length select').removeClass('custom-select-sm');
$('.dataTables_length').addClass('float-left');
$('.dataTables_filter input').attr('placeholder', '학생이름을 입력하세요.');
$('#DataTables_Table_0_filter label input').addClass('form-control m-0');
});
</script>
<!-- //데이타테이블 -->
<script>
//modal내용
$('#classPerBox').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var name = button.data('whatever');
var modal = $(this);
modal.find('.pername').text(name);
});
</script>
</body>
</html>
반응형
'Javascript' 카테고리의 다른 글
| 06_아날로그 시계 (0) | 2021.03.13 |
|---|---|
| 05_키보드 드럼 (0) | 2021.03.13 |
| 03_로또랜덤뽑기 (0) | 2021.03.13 |
| 02_점심랜덤룰렛 (0) | 2021.03.13 |
| 01_투두리스트 (0) | 2021.03.13 |
