xit-app
/
adds-fo
20
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

보고문서관리 메인 페이징처리방식 변경(무한스크롤 -> 페이지네이션)

Browse Source
dev
이범준 5 months ago
parent 7816c8fdab
commit 00845fe0d5
1 changed files with 57 additions and 68 deletions
Show Stats Download Patch File Download Diff File

125
src/main/webapp/WEB-INF/jsp/adds/nims/dsuseDoc-main.jsp
Unescape Escape View File

@ -78,62 +78,62 @@
</div>
<!-- DataTables(그리드) -->
<div class="card-datatable text-nowrap">
<div class="dataTables_wrapper dt-bootstrap5 no-footer" id="DataTables_Table_0_wrapper--${pageName}">
<div class="table-responsive ox-scroll oy-scroll h-px-500" id="table-responsive--${pageName}">
<table class="table-layout-fixed dataTable datatables-ajax table table-bordered no-footer" id="DataTables_Table_0--${pageName}" aria-describedby="DataTables_Table_0_info">
<thead class="sticky-thead">
<tr id="theadTr--${pageName}"
data-by="by--${pageName}" data-by-output="byOutput--${pageName}" data-main-option="mainOption--${pageName}" data-sub-option="subOption--${pageName}">
<th class="cmn" style="width: 72px;">No.</th>
<th class="cmn" style="width: 130.141px;">폐기관리번호</th>
<th class="cmn" style="width: 120.141px;">취급일자</th>
<th class="cmn" style="width: 120.469px;">폐기일자</th>
<th class="cmn" style="width: 250.469px;">업체명</th>
<th class="cmn" style="width: 90px;">폐기건수</th>
<th class="cmn" style="width: 170.469px;">처리상태</th>
<th class="cmn" style="width: 150.469px;">폐기결과보고서</th>
<th class="cmn" style="width: 170.469px;">폐기처리내역및사진</th>
<th class="cmn" style="width: 180.469px;">폐기사유</th>
<th class="cmn" style="width: 150px;">폐기구분</th>
<th class="cmn" style="width: 150px;">폐기방법</th>
<th class="cmn" style="width: 200.469px;">폐기장소</th>
</tr>
</thead>
<tbody id="tbody--${pageName}">
</tbody>
<template id="${infoPrefix}Row--${pageName}">
<tr data-key="dscdmng_id">
<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{ROW_NUM}</td>
<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{dscdmng_id}</td>
<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{hdr_de}</td>
<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{dsuse_de}</td>
<td class="cmn text-start" onclick="{onclick}" ondblclick="{ondblclick}">{bssh_nm}</td>
<td class="cmn text-end" onclick="{onclick}" ondblclick="{ondblclick}">{rnd_dtl_rpt_cnt}</td>
<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{prgrs_stts_nm}</td>
<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{dsuse_rslt_doc}</td>
<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{dsuse_rslt_list_photo}</td>
<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{dsuse_prv_nm}</td>
<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{dsuse_se_nm}</td>
<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{dsuse_mth_nm}</td>
<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{dsuse_loc}</td>
<div class="card-datatable text-nowrap">
<div class="dataTables_wrapper dt-bootstrap5 no-footer" id="DataTables_Table_0_wrapper--${pageName}">
<div class="table-responsive ox-scroll oy-scroll h-px-500" id="table-responsive--${pageName}">
<table class="table-layout-fixed dataTable datatables-ajax table table-bordered no-footer" id="DataTables_Table_0--${pageName}" aria-describedby="DataTables_Table_0_info">
<thead class="sticky-thead">
<tr id="theadTr--${pageName}"
data-by="by--${pageName}" data-by-output="byOutput--${pageName}" data-main-option="mainOption--${pageName}" data-sub-option="subOption--${pageName}">
<th class="cmn" style="width: 72px;">No.</th>
<th class="cmn" style="width: 130.141px;">폐기관리번호</th>
<th class="cmn" style="width: 120.141px;">취급일자</th>
<th class="cmn" style="width: 120.469px;">폐기일자</th>
<th class="cmn" style="width: 250.469px;">업체명</th>
<th class="cmn" style="width: 90px;">폐기건수</th>
<th class="cmn" style="width: 170.469px;">처리상태</th>
<th class="cmn" style="width: 150.469px;">폐기결과보고서</th>
<th class="cmn" style="width: 170.469px;">폐기처리내역및사진</th>
<th class="cmn" style="width: 180.469px;">폐기사유</th>
<th class="cmn" style="width: 150px;">폐기구분</th>
<th class="cmn" style="width: 150px;">폐기방법</th>
<th class="cmn" style="width: 200.469px;">폐기장소</th>
</tr>
</thead>
<tbody id="tbody--${pageName}">
</tbody>
<template id="${infoPrefix}Row--${pageName}">
<tr data-key="dscdmng_id">
<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{ROW_NUM}</td>
<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{dscdmng_id}</td>
<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{hdr_de}</td>
<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{dsuse_de}</td>
<td class="cmn text-start" onclick="{onclick}" ondblclick="{ondblclick}">{bssh_nm}</td>
<td class="cmn text-end" onclick="{onclick}" ondblclick="{ondblclick}">{rnd_dtl_rpt_cnt}</td>
<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{prgrs_stts_nm}</td>
<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{dsuse_rslt_doc}</td>
<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{dsuse_rslt_list_photo}</td>
<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{dsuse_prv_nm}</td>
<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{dsuse_se_nm}</td>
<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{dsuse_mth_nm}</td>
<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{dsuse_loc}</td>
<%-- <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{USR_RPT_ID_NO}</td>--%>
</tr>
</template>
<template id="${infoPrefix}NotFound--${pageName}">
<tr class="odd">
<td valign="top" colspan="13" class="dataTables_empty text-center">${prefixName} 정보를 찾지 못했습니다.</td>
</tr>
</template>
</table>
</div>
</div>
</div>
<!-- / DataTables(그리드) -->
</tr>
</template>
<template id="${infoPrefix}NotFound--${pageName}">
<tr class="odd">
<td valign="top" colspan="13" class="dataTables_empty text-center">${prefixName} 정보를 찾지 못했습니다.</td>
</tr>
</template>
</table>
</div>
</div>
</div>
<!-- / DataTables(그리드) -->
<div class="d-flex flex-row p-3 justify-content-between">
<label id="userPagingInfo" class="dataTables_info" role="status" aria-live="polite">1 ~ 2 / 2</label>
<ul id="userPaging" class="pagination pagination-primary" style="display: none;">
<label id="${infoPrefix}Paging--${pageName}PagingInfo" class="dataTables_info" role="status" aria-live="polite"></label>
<ul id="${infoPrefix}Paging--${pageName}" class="pagination pagination-primary" style="display: none;">
</ul>
</div>
@ -185,10 +185,10 @@
// Dataset 변경 이벤트
$P.control.onDatasetChange = (obj) => {
$P.renderList(obj.${infoPrefix}Total);
$("#paging--${pageName}").setPaging({
$("#${infoPrefix}Paging--${pageName}").setPaging({
list: $P.control.dataset
, prefix: "paging--${pageName}"
, prefix: "${infoPrefix}Paging--${pageName}"
, start: obj.${infoPrefix}Start
, totalSize: obj.${infoPrefix}Total
, fetchSize: obj.${infoPrefix}Fetch
@ -253,10 +253,7 @@
let trs = empty ? [document.getElementById("${infoPrefix}NotFound--${pageName}").content.outerHTML]
: ${infoPrefix}List.inStrings(foundTr.outerHTML, replacer);
let noMore = (totalSize == ${infoPrefix}List.length);
let initScroll = ($P.control.query.pageNum < 2) && ($P.control.untilPageNum == 0);
$("#table-responsive--${pageName}")[0].changeContent(trs.join(), initScroll, noMore);
$("#tbody--${pageName}").html(trs.join());
if ($P.control.untilPageNum != 0) {
$P.control.query.fetchSize = $P.control.defaultFetchSize;
@ -266,12 +263,6 @@
}
// DataTables에 스크롤이 맨 밑으로 이동했을 때 이벤트
$P.scrollDataList = () => {
$P.control.tableRenderComplete = false; // dataTables 에 자료 추가 false
$P.control.load($P.control.query.pageNum + 1);
}
$P.control.getBsshInfo = (gdccId) => {
let dialogTitle = "마약류 취급자 조회";
@ -408,8 +399,6 @@
// DataTables width 변경 조정 (업무별 그리드가 존재 한다면.. crdn06010-main.jsp 참고)
fnMakeResizableTable($("#table-responsive--${pageName}")[0]);
// DataTables 스크롤 이벤트 생성
fnMakeScrollableTable($("#table-responsive--${pageName}")[0], $P.scrollDataList);
}
// 초기 화면 설정

Write Preview
Loading…
Cancel
Save