From b22c2b04d33ace319ff1b1abdb8d04550ff2a1f3 Mon Sep 17 00:00:00 2001
From: leebj <leebj91@xit.co.kr>
Date: Mon, 5 Aug 2024 16:57:34 +0900
Subject: [PATCH] =?UTF-8?q?=EC=86=8C=EC=8A=A4=EC=A0=95=EB=A6=AC(html?=
 =?UTF-8?q?=EC=97=98=EB=A6=AC=EB=A8=BC=ED=8A=B8=20id=EC=A0=9C=EA=B1=B0=20?=
 =?UTF-8?q?=EB=B0=8F=20name=EC=B6=94=EA=B0=80)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../WEB-INF/jsp/fims/crdn/crdn01010-main.jsp  | 10 ++--
 .../WEB-INF/jsp/fims/crdn/crdn02010-main.jsp  | 48 +++++++++----------
 .../WEB-INF/jsp/fims/crdn/crdn03010-main.jsp  | 31 ++++++------
 .../WEB-INF/jsp/fims/crdn/crdn05010-main.jsp  | 13 ++---
 .../WEB-INF/jsp/fims/crdn/crdn05020-info.jsp  | 11 +++--
 .../WEB-INF/jsp/fims/crdn/crdn06010-main.jsp  | 29 ++++++-----
 .../WEB-INF/jsp/fims/crdn/crdn07010-main.jsp  | 11 +++--
 .../WEB-INF/jsp/fims/crdn/crdn08010-main.jsp  | 13 ++---
 .../WEB-INF/jsp/fims/crdn/crdn08030-info.jsp  |  2 +-
 .../WEB-INF/jsp/fims/cvlc/cvlc01010-main.jsp  | 28 +++++------
 .../WEB-INF/jsp/fims/cvlc/cvlc02010-main.jsp  | 28 +++++------
 .../WEB-INF/jsp/fims/cvlc/cvlc03010-main.jsp  | 28 +++++------
 .../WEB-INF/jsp/fims/cvlc/cvlc04010-main.jsp  | 16 +++----
 .../WEB-INF/jsp/fims/mngt/mngt01010-main.jsp  |  8 ++--
 .../WEB-INF/jsp/fims/ogdp/ogdp02010-main.jsp  |  8 ++--
 src/main/webapp/WEB-INF/jsp/include/tail.jsp  |  2 +
 .../resources/js/fims/cmmn/customElements.js  | 11 +++++
 .../resources/js/fims/cmmn/fims-cmmnUtil.js   |  9 ++--
 .../resources/js/fims/cmmn/searchUtil.js      | 34 +++++++++----
 19 files changed, 188 insertions(+), 152 deletions(-)
 create mode 100644 src/main/webapp/resources/js/fims/cmmn/customElements.js

diff --git a/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn01010-main.jsp b/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn01010-main.jsp
index 91156d05..41b8ba9b 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn01010-main.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn01010-main.jsp
@@ -55,10 +55,10 @@
 		    <div>
 		        <div name="gridbuttonArea" class="container-page-btn">
 		            <div class="d-flex flex-row justify-content-between">
-						<span id="layoutPaging--${pageName}PagingInfo" 
-							name="layoutPagingPagingInfo" class="dataTables_info" role="status" aria-live="polite"></span>
-		                <ul id="layoutPaging--${pageName}" 
-		                	name="layoutPaging" class="pagination pagination-primary">
+						<span is="paging-info" data-ref-doctx="${pageName}" name="layoutPagingInfo" 
+						class="dataTables_info"></span>
+		                <ul name="layoutPaging" 
+		                class="pagination pagination-primary">
 		                </ul>
 					</div>
 					
@@ -156,7 +156,7 @@ $(document).ready(function(){
 		var trs = Apply.fromDataset.getTbody($P.ctrl.dataset, t.found, t.notFound, t.replacer);
 		$P.renderLayoutList(obj["Total"], $P.ctrl.dataset.length, trs, option);
 		
-		Apply.fromDataset.paging($P.ctrl.dataset, obj, "layoutPaging--${pageName}");
+		Apply.fromDataset.paging($P.ctrl.dataset, obj, $P.find("layoutPaging"), $P.find("layoutPagingInfo"));
 	};
 
 	$P.ctrl.dataset.onCurrentChange = (dataItem) => {
diff --git a/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn02010-main.jsp b/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn02010-main.jsp
index 62421964..e35e825e 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn02010-main.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn02010-main.jsp
@@ -101,11 +101,11 @@
                         </div>
 						<!-- 동적검색 -->
 						<div class="col-6">
-                        	<input type="hidden" id="by--${pageName}" name="by" />
-							<input type="text" class="form-control fw-bold w-px-120 text-end" id="byOutput--${pageName}" value="동적 검색" readonly />
-							<input type="hidden" id="mainOption--${pageName}" name="mainOption" />
-							<input type="hidden" id="subOption--${pageName}" name="subOption" />
-							<input type="text" class="form-control w-px-400" id="term--${pageName}" name="term" autocomplete="off" />
+                        	<input type="hidden" name="by" />
+							<input type="text" class="form-control fw-bold w-px-120 text-end" name="byOutput" value="동적 검색" readonly />
+							<input type="hidden" name="mainOption" />
+							<input type="hidden" name="subOption" />
+							<input type="text" class="form-control w-px-400" name="term" autocomplete="off" />
 							<!-- 상세 검색조건 버튼 -->
 							<span class="flr">
 								<button type="button" class="btn btn-open-detail" data-bs-toggle="collapse" 
@@ -161,18 +161,18 @@
 
 	        <div name="gridbuttonArea" class="container-page-btn">
 	        	<div class="d-flex flex-row justify-content-between">
-					<span id="photoInspectionPaging--${pageName}PagingInfo"
-						class="dataTables_info area-photoinspection" role="status" aria-live="polite"></span>
-	                 <ul id="photoInspectionPaging--${pageName}"
-	                 class="pagination pagination-primary area-photoinspection">
-	                 </ul>
+					<span is="paging-info" data-ref-doctx="${pageName}" name="photoInspectionPagingInfo" 
+					class="dataTables_info area-photoinspection"></span>
+	                <ul name="photoInspectionPaging"
+	                class="pagination pagination-primary area-photoinspection">
+	                </ul>
 				</div>
 				<div class="d-flex flex-row justify-content-between">
-					<span id="sameVehicleInspectionMainPaging--${pageName}PagingInfo"
-						class="dataTables_info area-samevehicleinspection" role="status" aria-live="polite"></span>
-	                 <ul id="sameVehicleInspectionMainPaging--${pageName}"
-	                 class="pagination pagination-primary area-samevehicleinspection">
-	                 </ul>
+					<span is="paging-info" data-ref-doctx="${pageName}" name="photoInspectionPagingInfo" 
+					class="dataTables_info area-samevehicleinspection"></span>
+	                <ul name="photoInspectionPaging"
+	                class="pagination pagination-primary area-samevehicleinspection">
+	                </ul>
 				</div>
 	            <span class="container-window-btn-right">
 					<button type="button" name="btnInstLevyExcl" class="btn btn-primary"
@@ -195,8 +195,7 @@
 						<table name="photoInspection_Table_0"
 							class="table-layout-fixed datatables-ajax table table-bordered dataTable no-footer">
 							<thead class="sticky-thead">
-								<tr data-by="by--${pageName}" data-by-output="byOutput--${pageName}"
-									data-main-option="mainOption--${pageName}" data-sub-option="subOption--${pageName}">
+								<tr data-search-target="[data-doctx='${pageName}']">
 									<th style="width: 80px;">No.</th>
 									<th onclick="searchFromGridTitle('CRDN_YMD','단속일자','ymd','');"
 									style="width: 180px;">단속일시</th>
@@ -277,8 +276,7 @@
 								<table name="sameVehicleInspectionMain_Table_0"
 									class="table-layout-fixed datatables-ajax table table-bordered dataTable no-footer">
 									<thead class="sticky-thead">
-										<tr data-by="by--${pageName}" data-by-output="byOutput--${pageName}"
-											data-main-option="mainOption--${pageName}" data-sub-option="subOption--${pageName}">
+										<tr data-search-target="[data-doctx='${pageName}']">
 											<th onclick="searchFromGridTitle('VHRNO',this.innerText,'match','part');"
 											style="width:120px">차량번호</th>
 											<th onclick="searchFromGridTitle('CRDN_STDG_NM',this.innerText,'match','perfect');"
@@ -316,8 +314,7 @@
 								<table name="sameVehicleInspectionSub_Table_0"
 									class="table-layout-fixed datatables-ajax table table-bordered dataTable no-footer">
 									<thead class="sticky-thead">
-										<tr data-by="by--${pageName}" data-by-output="byOutput--${pageName}"
-											data-main-option="mainOption--${pageName}" data-sub-option="subOption--${pageName}">
+										<tr data-search-target="[data-doctx='${pageName}']">
 											<th onclick="searchFromGridTitle('CRDN_YMD','단속일자','ymd','');"
 											style="width:180px">단속일시</th>
 											<th onclick="searchFromGridTitle('CRDN_INPT_SE_CD',this.innerText,'codeValue','FIM003');"
@@ -431,7 +428,7 @@ $(document).ready(function(){
 		var trs = Apply.fromDataset.getTbody($P.ctrl.dataset, t.found, t.notFound, t.replacer);
 		$P.renderInspectionDataList(obj["Total"], $P.ctrl.dataset.length, trs, "photoInspection", option);
 
-		Apply.fromDataset.paging($P.ctrl.dataset, obj, "photoInspectionPaging--${pageName}");
+		Apply.fromDataset.paging($P.ctrl.dataset, obj, $P.find("photoInspectionPaging"), $P.find("photoInspectionPagingInfo"));
 	};
 
 	$P.ctrl.dataset.onCurrentChange = (dataItem) => {
@@ -458,7 +455,8 @@ $(document).ready(function(){
 		var trs = Apply.fromDataset.getTbody($P.alt.dataset, t.found, t.notFound, t.replacer);
 		$P.renderInspectionDataList(obj["Total"], $P.alt.dataset.length, trs, "sameVehicleInspectionMain", option);
 
-		Apply.fromDataset.paging($P.alt.dataset, obj, "sameVehicleInspectionMainPaging--${pageName}");
+		Apply.fromDataset.paging($P.alt.dataset, obj, 
+				$P.find("sameVehicleInspectionMainPaging"), "sameVehicleInspectionMainPagingInfo"));
 	};
 
 	$P.alt.dataset.onCurrentChange = (dataItem) => {
@@ -491,7 +489,7 @@ $(document).ready(function(){
 		searchForm.find("input[type='hidden']").val("");
 		searchForm.find("select").each(function(){ $(this).find("option:eq(0)").prop("selected", true); });
 
-		$("#byOutput--${pageName}").val("동적 검색");
+		$P.$find("byOutput").val("동적 검색");
 		$("#schRgtrNm--${pageName}").prop("readonly", true);				// 사용자 이름
 		$('#schCrdnYmdFrom--${pageName}').datepicker('setDate', DateUtil.getDateDay(-7).date);
     	$('#schCrdnYmdTo--${pageName}').datepicker('setDate', TODAY());
@@ -1034,7 +1032,7 @@ $(document).ready(function(){
     
     $P.$find('btnSearch').on('click', () => $P.searchInspectionList()); //검색버튼
 	// 동적검색에서 엔터(Enter) 키를 누르면 검색한다.
-	$("#term--${pageName}").onEnterPress($P.searchInspectionList);
+	$P.$find("term").onEnterPress($P.searchInspectionList);
 
 	$P.$find("btnExcel").on('click', () => $P.fnExcelDown());
 	$P.$find("btnFindUser").on("click", () => $P.fnGetFindUser());		// 사용자 검색
diff --git a/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn03010-main.jsp b/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn03010-main.jsp
index d30f87cb..886fb257 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn03010-main.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn03010-main.jsp
@@ -34,11 +34,11 @@
                             </span>
                         </div>
 						<div class="col-6">
-                        	<input type="hidden" id="by--${pageName}" name="by" />
-							<input type="text" class="form-control fw-bold w-px-120 text-end" id="byOutput--${pageName}" value="동적 검색" readonly />
-							<input type="hidden" id="mainOption--${pageName}" name="mainOption" />
-							<input type="hidden" id="subOption--${pageName}" name="subOption" />
-							<input type="text" class="form-control w-px-400" id="term--${pageName}" name="term" autocomplete="off" />
+                        	<input type="hidden" name="by" />
+							<input type="text" class="form-control fw-bold w-px-120 text-end" name="byOutput" value="동적 검색" readonly />
+							<input type="hidden" name="mainOption" />
+							<input type="hidden" name="subOption" />
+							<input type="text" class="form-control w-px-400" name="term" autocomplete="off" />
 						</div>
                     </div>
 		        </div>
@@ -46,10 +46,11 @@
 		    <div>
 		        <span class="container-page-btn">
 		        	<div class="d-flex flex-row justify-content-between">
-						<span id="crdnPaging--${pageName}PagingInfo" class="dataTables_info"
-						role="status" aria-live="polite"></span>
-		                 <ul id="crdnPaging--${pageName}" class="pagination pagination-primary">
-		                 </ul>
+						<span is="paging-info" data-ref-doctx="${pageName}" name="crdnPagingInfo"
+						class="dataTables_info"></span>
+		                <ul name="crdnPaging"
+		                class="pagination pagination-primary">
+		                </ul>
 					</div>
 		            <span class="container-window-btn-right">
 		                <button type="button" name="btnUpdateToConfirmData"
@@ -63,9 +64,7 @@
 					<div name="table-responsive" class="table-responsive ox-scroll oy-scroll h-px-600">
 						<table class="table-layout-fixed datatables-ajax table table-bordered dataTable no-footer" >
 							<thead class="sticky-thead">
-								<tr id="crdnTheadTr--${pageName}"
-									data-by="by--${pageName}" data-by-output="byOutput--${pageName}"
-									data-main-option="mainOption--${pageName}" data-sub-option="subOption--${pageName}">
+								<tr name="crdnTheadTr" data-search-target="[data-doctx='${pageName}']">
 									<th style="width: 100px;">No.</th>
 									<th onclick="searchFromGridTitle('CRDN_INPT_SE_CD',this.innerText,'codeValue','FIM003');"
 									style="width: 200px;">자료출처</th>
@@ -164,7 +163,7 @@ $(document).ready(function(){
 		var trs = Apply.fromDataset.getTbody($P.ctrl.dataset, t.found, t.notFound, t.replacer);
 		$P.renderCrdnList(obj["Total"], $P.ctrl.dataset.length, trs, option);
 
-		Apply.fromDataset.paging($P.ctrl.dataset, obj, "crdnPaging--${pageName}");
+		Apply.fromDataset.paging($P.ctrl.dataset, obj, $P.find("crdnPaging"), $P.find("crdnPagingInfo"));
 	};
 
 	$P.ctrl.dataset.onCurrentChange = (dataItem) => {
@@ -182,7 +181,7 @@ $(document).ready(function(){
 		searchForm.find("input[type='hidden']").val("");
 		searchForm.find("select").each(function(){ $(this).find("option:eq(0)").prop("selected", true); });
 
-		$("#byOutput--${pageName}").val("동적 검색");
+		$P.$find("byOutput").val("동적 검색");
 		$('#schCrdnYmdFrom--${pageName}').datepicker('setDate', DateUtil.getDateDay(-5475).date);
 	    $('#schCrdnYmdTo--${pageName}').datepicker('setDate', TODAY());
 	    $P.ctrl.dataset.setData([]);
@@ -250,7 +249,7 @@ $(document).ready(function(){
     		return;
     	}
 
-		var cellDefs = getCellDefs($("#crdnTheadTr--${pageName} th").not(".dummy-th").not(":eq(0)"),
+		var cellDefs = getCellDefs($P.$find("crdnTheadTr").find("th").not(".dummy-th").not(":eq(0)"),
     			$($P.find("crdnRow").content).find("td").not(".dummy-td").not(":eq(0)"));
 		$P.ctrl.query.cellDefs = cellDefs;
 
@@ -364,7 +363,7 @@ $(document).ready(function(){
 	$P.$find("btnReset").on('click', () => $P.fnReset());
 	$P.$find("btnSearch").on('click', () => $P.searchCrdnList());
  	// 동적검색에서 엔터(Enter) 키를 누르면 검색한다.
-	$("#term--${pageName}").onEnterPress($P.searchCrdnList);
+	$P.$find("term").onEnterPress($P.searchCrdnList);
 	$P.$find("btnExcel").on('click', () => $P.fnExcelDown());
 
 	fnMakeResizableTable($P.find("table-responsive"));
diff --git a/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn05010-main.jsp b/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn05010-main.jsp
index adabcda2..bd2bfe7e 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn05010-main.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn05010-main.jsp
@@ -42,10 +42,11 @@
 			<div>
 				<span class="container-page-btn">
 					<div class="d-flex flex-row justify-content-between">
-						<span id="crdnPaging--${pageName}PagingInfo" class="dataTables_info"
-						role="status" aria-live="polite"></span>
-		                 <ul id="crdnPaging--${pageName}" class="pagination pagination-primary">
-		                 </ul>
+						<span is="paging-info" data-ref-doctx="${pageName}" name="crdnPagingInfo"
+						class="dataTables_info"></span>
+		                <ul name="crdnPaging"
+		                class="pagination pagination-primary">
+		                </ul>
 					</div>
 					<span class="container-window-btn-right">
 						<button type="button" name="btnInsertByFile" class="btn btn-primary"
@@ -60,7 +61,7 @@
 					<div name="table-responsive" class="table-responsive ox-scroll oy-scroll h-px-600">
 						<table class="table-layout-fixed datatables-ajax table table-bordered dataTable no-footer">
 							<thead class="sticky-thead">
-								<tr id="crdnTheadTr--${pageName}">
+								<tr name="crdnTheadTr">
 									<th style="width: 80px;">No.</th>
 									<th style="width: 200px;">등록구분</th>
 									<th style="width: 200px;">자료출처</th>
@@ -145,7 +146,7 @@ $(document).ready(function(){
 		var trs = Apply.fromDataset.getTbody($P.ctrl.dataset, t.found, t.notFound, t.replacer);
 		$P.renderCrdnList(obj["Total"], $P.ctrl.dataset.length, trs, option);
 
-		Apply.fromDataset.paging($P.ctrl.dataset, obj, "crdnPaging--${pageName}");
+		Apply.fromDataset.paging($P.ctrl.dataset, obj, $P.find("crdnPaging"), $P.find("crdnPagingInfo"));
 
 	};
 
diff --git a/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn05020-info.jsp b/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn05020-info.jsp
index 0ce69fb2..ca57bf86 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn05020-info.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn05020-info.jsp
@@ -47,10 +47,11 @@
 				<div>
 					<span class="container-page-btn">
 						<div class="d-flex flex-row justify-content-between">
-							<span id="parsedInfoPaging--${pageName}PagingInfo" class="dataTables_info" 
-							role="status" aria-live="polite"></span>
-			                 <ul id="parsedInfoPaging--${pageName}" class="pagination pagination-primary">
-			                 </ul>
+							<span is="paging-info" data-ref-doctx="${pageName}" name="parsedInfoPagingInfo"
+							class="dataTables_info"></span>
+			                <ul name="parsedInfoPaging"
+			                class="pagination pagination-primary">
+			                </ul>
 						</div>
 						<span class="container-window-btn-right">
 						</span>
@@ -195,7 +196,7 @@ $(document).ready(function(){
 		var trs = Apply.fromDataset.getTbody($P.ctrl.dataset, t.found, t.notFound, t.replacer);
 		$P.renderParsedInfoList(obj["Total"], $P.ctrl.dataset.length, trs);
 		
-		Apply.fromDataset.paging($P.ctrl.dataset, obj, "parsedInfoPaging--${pageName}");
+		Apply.fromDataset.paging($P.ctrl.dataset, obj, $P.find("parsedInfoPaging"), $P.find("parsedInfoPagingInfo"));
 	};
 	
 	$P.ctrl.dataset.onCurrentChange = (dataItem) => {
diff --git a/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn06010-main.jsp b/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn06010-main.jsp
index 514796c9..03671025 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn06010-main.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn06010-main.jsp
@@ -66,11 +66,11 @@
                             <input type="text" id="vhrno--${pageName}" name="vhrno" class="form-control" />
                         </div>
 						<div class="col-6">
-                        	<input type="hidden" id="by--${pageName}" name="by" />
-							<input type="text" class="form-control fw-bold w-px-120 text-end" id="byOutput--${pageName}" value="동적 검색" readonly />
-							<input type="hidden" id="mainOption--${pageName}" name="mainOption" />
-							<input type="hidden" id="subOption--${pageName}" name="subOption" />
-							<input type="text" class="form-control w-px-400" id="term--${pageName}" name="term" autocomplete="off" />
+                        	<input type="hidden" name="by" />
+							<input type="text" class="form-control fw-bold w-px-120 text-end" name="byOutput" value="동적 검색" readonly />
+							<input type="hidden" name="mainOption" />
+							<input type="hidden" name="subOption" />
+							<input type="text" class="form-control w-px-400" name="term" autocomplete="off" />
 							<!-- 상세 검색조건 버튼 -->
 							<span class="flr">
 								<button type="button" class="btn btn-open-detail" data-bs-toggle="collapse" 
@@ -157,10 +157,11 @@
 		    <div>
 		        <div name="gridbuttonArea" class="container-page-btn">
 		            <div class="d-flex flex-row justify-content-between">
-						<span id="crdnPaging--${pageName}PagingInfo" class="dataTables_info" 
-						role="status" aria-live="polite"></span>
-		                 <ul id="crdnPaging--${pageName}" class="pagination pagination-primary">
-		                 </ul>
+						<span is="paging-info" data-ref-doctx="${pageName}" name="crdnPagingInfo" 
+						class="dataTables_info" ></span>
+		                <ul name="crdnPaging"
+		                class="pagination pagination-primary">
+		                </ul>
 					</div>
 
 					<span class="container-window-btn-right">
@@ -183,9 +184,7 @@
 					class="table-responsive ox-scroll oy-scroll h-px-500">
 						<table class="table-layout-fixed datatables-ajax table table-bordered dataTable no-footer">
 							<thead class="sticky-thead">
-								<tr name="crdnThead"
-								data-by="by--${pageName}" data-by-output="byOutput--${pageName}"
-								data-main-option="mainOption--${pageName}" data-sub-option="subOption--${pageName}">
+								<tr name="crdnThead" data-search-target="[data-doctx='${pageName}']">
 								</tr>
 							</thead>
 		                    <tbody name="crdnTbody"></tbody>
@@ -332,7 +331,7 @@ $(document).ready(function(){
 		var trs = Apply.fromDataset.getTbody($P.ctrl.dataset, t.found, t.notFound, t.replacer);
 		$P.renderCrdnList(obj["Total"], $P.ctrl.dataset.length, trs, option);
 
-		Apply.fromDataset.paging($P.ctrl.dataset, obj, "crdnPaging--${pageName}");
+		Apply.fromDataset.paging($P.ctrl.dataset, obj, $P.find("crdnPaging"), $P.find("crdnPagingInfo"));
 	};
 
 	$P.ctrl.dataset.onCurrentChange = (dataItem) => {
@@ -355,7 +354,7 @@ $(document).ready(function(){
 		searchForm.find("input[type='hidden']").val("");
 		searchForm.find("select").each(function(){ $(this).find("option:eq(0)").prop("selected", true); });
 
-		$("#byOutput--${pageName}").val("동적 검색");
+		$P.$find("byOutput").val("동적 검색");
 		$("#schRgtrNm--${pageName}").prop("readonly", true);				// 사용자 이름
 		$('#schCrdnYmdFrom--${pageName}').datepicker('setDate', DateUtil.getDateDay(-365).date);
 	    $('#schCrdnYmdTo--${pageName}').datepicker('setDate', TODAY());
@@ -586,7 +585,7 @@ $(document).ready(function(){
 	
 	$P.$find("btnFindUser").on("click", () => $P.fnGetFindUser());		// 사용자 검색
 	// 동적검색에서 엔터(Enter) 키를 누르면 검색한다.
-	$("#term--${pageName}").onEnterPress($P.searchCrdnList);
+	$P.$find("term").onEnterPress($P.searchCrdnList);
 	
     fnMakeResizableTable($P.find("table-responsive"));
     fnMakeScrollableTable($P.find("table-responsive"), $P.scrollCrdnList);
diff --git a/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn07010-main.jsp b/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn07010-main.jsp
index 12f420a0..707d313d 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn07010-main.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn07010-main.jsp
@@ -42,10 +42,11 @@
 			<div>
 				<span class="container-page-btn">
 					<div class="d-flex flex-row justify-content-between">
-						<span id="useTeamPaging--${pageName}PagingInfo" class="dataTables_info"
-						role="status" aria-live="polite"></span>
-		                 <ul id="useTeamPaging--${pageName}" class="pagination pagination-primary">
-		                 </ul>
+						<span is="paging-info" data-ref-doctx="${pageName}" name="useTeamPagingInfo"
+						class="dataTables_info"></span>
+		                <ul name="useTeamPaging"
+		                class="pagination pagination-primary">
+		                </ul>
 					</div>
 			     </span>
 			</div>
@@ -290,7 +291,7 @@ $(document).ready(function(){
 		var trs = Apply.fromDataset.getTbody($P.ctrl.dataset, t.found, t.notFound, t.replacer);
 		$P.renderUseTeamList(obj["Total"], $P.ctrl.dataset.length, trs);
 
-		Apply.fromDataset.paging($P.ctrl.dataset, obj, "useTeamPaging--${pageName}");
+		Apply.fromDataset.paging($P.ctrl.dataset, obj, $P.find("useTeamPaging"), $P.find("useTeamPagingInfo"));
 	};
 
 	$P.alt.dataset.onDatasetChange = (obj, option) => {
diff --git a/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn08010-main.jsp b/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn08010-main.jsp
index 2ddd1e26..e3e7aca0 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn08010-main.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn08010-main.jsp
@@ -43,10 +43,11 @@
 			<div>
 				<span class="container-page-btn">
 					<div class="d-flex flex-row justify-content-between">
-						<span id="exmptnVhclPaging--${pageName}PagingInfo" class="dataTables_info"
-						role="status" aria-live="polite"></span>
-		                 <ul id="exmptnVhclPaging--${pageName}" class="pagination pagination-primary">
-		                 </ul>
+						<span is="paging-info" data-ref-doctx="${pageName}" name="exmptnVhclPagingInfo" 
+						class="dataTables_info"></span>
+		                <ul name="exmptnVhclPaging"
+		                class="pagination pagination-primary">
+		                </ul>
 					</div>
 					<span class="container-window-btn-right">
 						<button type="button" name="btnCreate"
@@ -185,7 +186,7 @@ $(document).ready(function(){
 		var trs = Apply.fromDataset.getTbody($P.ctrl.dataset, t.found, t.notFound, t.replacer);
 		$P.renderExmptnVhclList(obj["Total"], $P.ctrl.dataset.length, trs, option);
 
-		Apply.fromDataset.paging($P.ctrl.dataset, obj, "exmptnVhclPaging--${pageName}");
+		Apply.fromDataset.paging($P.ctrl.dataset, obj, $P.find("exmptnVhclPaging"), $P.find("exmptnVhclPagingInfo"));
 	};
 
 	$P.ctrl.dataset.onCurrentChange = (dataItem) => {
@@ -383,7 +384,7 @@ $(document).ready(function(){
 			url : $P.ctrl.urls.remove,
 			data : {
 				"exmptnVhclId" : dataKey,
-				"delRsn" : $("#delRsn--${pageName}").val()
+				"delRsn" : $("#delRsnDialog--${pageName}").find("[name='delRsn']").val()
 			},
 			success : (resp) => {
 				if(resp.saved){
diff --git a/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn08030-info.jsp b/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn08030-info.jsp
index 896a4bd8..ed229cb6 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn08030-info.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn08030-info.jsp
@@ -9,7 +9,7 @@
 			class="table-responsive ox-scroll oy-scroll h-px-550">
 				<table class="table-layout-fixed datatables-ajax table table-bordered dataTable no-footer">
 					<thead class="sticky-thead">
-						<tr id="exmptnVhclTheadTr--${pageName}">
+						<tr name="exmptnVhclTheadTr">
 							<th style="width: 80px;">No.</th>
 							<th style="width: 140px;">차량번호</th>
 							<th style="width: 300px;">면제사유</th>
diff --git a/src/main/webapp/WEB-INF/jsp/fims/cvlc/cvlc01010-main.jsp b/src/main/webapp/WEB-INF/jsp/fims/cvlc/cvlc01010-main.jsp
index f4e53ca5..0e08668e 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/cvlc/cvlc01010-main.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/cvlc/cvlc01010-main.jsp
@@ -71,11 +71,11 @@
                             </span>
                         </div>
                        	<div class="col-6">
-                        	<input type="hidden" id="by--${pageName}" name="by" />
-							<input type="text" class="form-control fw-bold w-px-120 text-end" id="byOutput--${pageName}" value="동적 검색" readonly />
-							<input type="hidden" id="mainOption--${pageName}" name="mainOption" />
-							<input type="hidden" id="subOption--${pageName}" name="subOption" />
-							<input type="text" class="form-control w-px-400" id="term--${pageName}" name="term" autocomplete="off" />
+                        	<input type="hidden" name="by" />
+							<input type="text" class="form-control fw-bold w-px-120 text-end" name="byOutput" value="동적 검색" readonly />
+							<input type="hidden" name="mainOption" />
+							<input type="hidden" name="subOption" />
+							<input type="text" class="form-control w-px-400" name="term" autocomplete="off" />
 							<!-- 상세 검색조건 버튼 -->
 							<span class="flr">
 								<button type="button" class="btn btn-open-detail" data-bs-toggle="collapse" 
@@ -111,10 +111,11 @@
 		    <div>
 		        <span class="container-page-btn">
 		            <div class="d-flex flex-row justify-content-between">
-						<span id="crdnPaging--${pageName}PagingInfo" class="dataTables_info"
-						role="status" aria-live="polite"></span>
-		                 <ul id="crdnPaging--${pageName}" class="pagination pagination-primary">
-		                 </ul>
+						<span is="paging-info" data-ref-doctx="${pageName}" name="crdnPagingInfo" 
+						class="dataTables_info"></span>
+		                <ul name="crdnPaging"
+		                class="pagination pagination-primary">
+		                </ul>
 					</div>
 		            <span class="container-window-btn-right">
 		            	<button type="button" name="btnOpenCvlcptOrgnl" class="btn btn-primary"
@@ -134,8 +135,7 @@
 					class="table-responsive ox-scroll oy-scroll h-px-500">
 						<table class="table-layout-fixed datatables-ajax table table-bordered dataTable no-footer">
 							<thead name="crdnThead" class="sticky-thead">
-								<tr data-by="by--${pageName}" data-by-output="byOutput--${pageName}"
-									data-main-option="mainOption--${pageName}" data-sub-option="subOption--${pageName}">
+								<tr data-search-target="[data-doctx='${pageName}']">
 									<th style="width: 80px;">No.</th>
 									<th onclick="searchFromGridTitle('CVLCPT_RCPT_NO',this.innerText,'match','part');"
 									style="width: 180px;">접수번호</th>
@@ -270,7 +270,7 @@ $(document).ready(function(){
 		var trs = Apply.fromDataset.getTbody($P.ctrl.dataset, t.found, t.notFound, t.replacer);
 		$P.renderCrdnList(obj["Total"], $P.ctrl.dataset.length, trs, option);
 
-	    Apply.fromDataset.paging($P.ctrl.dataset, obj, "crdnPaging--${pageName}");
+	    Apply.fromDataset.paging($P.ctrl.dataset, obj, $P.find("crdnPaging"), $P.find("crdnPagingInfo"));
 	};
 
 	$P.ctrl.dataset.onCurrentChange = (dataItem) => {
@@ -313,7 +313,7 @@ $(document).ready(function(){
 		searchForm.find("input[type='hidden']").val("");
 		searchForm.find("select").each(function(){ $(this).find("option:eq(0)").prop("selected", true); });
 
-		$("#byOutput--${pageName}").val("동적 검색");
+		$P.$find("byOutput").val("동적 검색");
 		$("#schRgtrNm--${pageName}").prop("readonly", true);				// 사용자 이름
 		$('#schCvlcptRcptYmdFrom--${pageName}').datepicker('setDate', DateUtil.getDateDay(-5475).date);
 	    $('#schCvlcptRcptYmdTo--${pageName}').datepicker('setDate', TODAY());
@@ -689,7 +689,7 @@ $(document).ready(function(){
 	$P.$find("btnExcel").on('click', () => $P.fnExcelDown());
 	
 	// 동적검색에서 엔터(Enter) 키를 누르면 검색한다.
-	$("#term--${pageName}").onEnterPress($P.searchCrdnList);
+	$P.$find("term").onEnterPress($P.searchCrdnList);
 	
 	$P.$find("btnHold").on("click", () => $P.fnHold());
 	$P.$find("btnDelete").on("click", () => $P.fnRemove());
diff --git a/src/main/webapp/WEB-INF/jsp/fims/cvlc/cvlc02010-main.jsp b/src/main/webapp/WEB-INF/jsp/fims/cvlc/cvlc02010-main.jsp
index e7f758c6..a4b3f551 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/cvlc/cvlc02010-main.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/cvlc/cvlc02010-main.jsp
@@ -78,11 +78,11 @@
                             </span>
                         </div>
                        	<div class="col-6">
-                        	<input type="hidden" id="by--${pageName}" name="by" />
-							<input type="text" class="form-control fw-bold w-px-120 text-end" id="byOutput--${pageName}" value="동적 검색" readonly />
-							<input type="hidden" id="mainOption--${pageName}" name="mainOption" />
-							<input type="hidden" id="subOption--${pageName}" name="subOption" />
-							<input type="text" class="form-control w-px-400" id="term--${pageName}" name="term" autocomplete="off" />
+                        	<input type="hidden" name="by" />
+							<input type="text" class="form-control fw-bold w-px-120 text-end" name="byOutput" value="동적 검색" readonly />
+							<input type="hidden" name="mainOption" />
+							<input type="hidden" name="subOption" />
+							<input type="text" class="form-control w-px-400" name="term" autocomplete="off" />
 							<!-- 상세 검색조건 버튼 -->
 							<span class="flr">
 								<button type="button" class="btn btn-open-detail" data-bs-toggle="collapse" 
@@ -121,10 +121,11 @@
 		    <div>
 		        <span class="container-page-btn">
 		            <div class="d-flex flex-row justify-content-between">
-						<span id="crdnPaging--${pageName}PagingInfo" class="dataTables_info"
-						role="status" aria-live="polite"></span>
-		                 <ul id="crdnPaging--${pageName}" class="pagination pagination-primary">
-		                 </ul>
+						<span is="paging-info" data-ref-doctx="${pageName}" name="crdnPagingInfo"
+						class="dataTables_info"></span>
+		                <ul name="crdnPaging"
+		                class="pagination pagination-primary">
+		                </ul>
 					</div>
 		            <span name="gridbuttonArea" class="container-window-btn-right">
 		            	<button type="button" name="btnOpenCvlcptOrgnl"
@@ -153,8 +154,7 @@
 					class="table-responsive ox-scroll oy-scroll h-px-500">
 						<table class="table-layout-fixed datatables-ajax table table-bordered dataTable no-footer">
 							<thead name="crdnThead" class="sticky-thead">
-								<tr data-by="by--${pageName}" data-by-output="byOutput--${pageName}"
-									data-main-option="mainOption--${pageName}" data-sub-option="subOption--${pageName}">
+								<tr data-search-target="[data-doctx='${pageName}']">
 									<th style="width: 80px;">No.</th>
 									<th style="width: 60px;">
 										<input type="checkbox" id="gridAllCheckbox--${pageName}"
@@ -276,7 +276,7 @@ $(document).ready(function(){
 		var trs = Apply.fromDataset.getTbody($P.ctrl.dataset, t.found, t.notFound, t.replacer);
 		$P.renderCrdnList(obj["Total"], $P.ctrl.dataset.length, trs, option);
 
-	    Apply.fromDataset.paging($P.ctrl.dataset, obj, "crdnPaging--${pageName}");
+	    Apply.fromDataset.paging($P.ctrl.dataset, obj, $P.find("crdnPaging"), $P.find("crdnPagingInfo"));
 	};
 
 	$P.ctrl.dataset.onCurrentChange = (dataItem) => {
@@ -301,7 +301,7 @@ $(document).ready(function(){
 		searchForm.find("input[type='hidden']").val("");
 		searchForm.find("select").each(function(){ $(this).find("option:eq(0)").prop("selected", true); });
 
-		$("#byOutput--${pageName}").val("동적 검색");
+		$P.$find("byOutput").val("동적 검색");
 		$('#schCvlcptRcptYmdFrom--${pageName}').datepicker('setDate', DateUtil.getDateDay(-31).date);
 	    $('#schCvlcptRcptYmdTo--${pageName}').datepicker('setDate', TODAY());
 
@@ -677,7 +677,7 @@ $(document).ready(function(){
 	$P.$find("btnExcelForApproval").on('click', () => $P.fnExcelDown(true));
 	
 	// 동적검색에서 엔터(Enter) 키를 누르면 검색한다.
-	$("#term--${pageName}").onEnterPress($P.searchCrdnList);
+	$P.$find("term").onEnterPress($P.searchCrdnList);
     
 	
 	$P.$find("btnOpenCvlcptOrgnl").on("click", () => $P.fnOpenCvlcptOrgnl());
diff --git a/src/main/webapp/WEB-INF/jsp/fims/cvlc/cvlc03010-main.jsp b/src/main/webapp/WEB-INF/jsp/fims/cvlc/cvlc03010-main.jsp
index 7ef6fe82..7a0e8e42 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/cvlc/cvlc03010-main.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/cvlc/cvlc03010-main.jsp
@@ -71,11 +71,11 @@
                             </span>
                         </div>
                        	<div class="col-6">
-                        	<input type="hidden" id="by--${pageName}" name="by" />
-							<input type="text" class="form-control fw-bold w-px-120 text-end" id="byOutput--${pageName}" value="동적 검색" readonly />
-							<input type="hidden" id="mainOption--${pageName}" name="mainOption" />
-							<input type="hidden" id="subOption--${pageName}" name="subOption" />
-							<input type="text" class="form-control w-px-400" id="term--${pageName}" name="term" autocomplete="off" />
+                        	<input type="hidden" name="by" />
+							<input type="text" class="form-control fw-bold w-px-120 text-end" name="byOutput" value="동적 검색" readonly />
+							<input type="hidden" name="mainOption" />
+							<input type="hidden" name="subOption" />
+							<input type="text" class="form-control w-px-400" name="term" autocomplete="off" />
 							<!-- 상세 검색조건 버튼 -->
 							<span class="flr">
 								<button type="button" class="btn btn-open-detail" data-bs-toggle="collapse" 
@@ -111,10 +111,11 @@
 		    <div>
 		        <span class="container-page-btn">
 		            <div class="d-flex flex-row justify-content-between">
-						<span id="crdnPaging--${pageName}PagingInfo" class="dataTables_info"
-						role="status" aria-live="polite"></span>
-		                 <ul id="crdnPaging--${pageName}" class="pagination pagination-primary">
-		                 </ul>
+						<span is="paging-info" data-ref-doctx="${pageName}" name="crdnPagingInfo"
+						class="dataTables_info"></span>
+		                <ul name="crdnPaging"
+		                class="pagination pagination-primary">
+		                </ul>
 					</div>
 		            <span class="container-window-btn-right">
 		            	<button type="button" name="btnOpenCvlcptOrgnl"
@@ -131,8 +132,7 @@
 					class="table-responsive ox-scroll oy-scroll h-px-500">
 						<table class="table-layout-fixed datatables-ajax table table-bordered dataTable no-footer">
 							<thead name="crdnThead" class="sticky-thead">
-								<tr data-by="by--${pageName}" data-by-output="byOutput--${pageName}"
-									data-main-option="mainOption--${pageName}" data-sub-option="subOption--${pageName}">
+								<tr data-search-target="[data-doctx='${pageName}']">
 									<th style="width: 80px;">No.</th>
 									<th onclick="searchFromGridTitle('CVLCPT_RCPT_NO',this.innerText,'match','part');"
 									style="width: 160px;">접수번호</th>
@@ -267,7 +267,7 @@ $(document).ready(function(){
 		var trs = Apply.fromDataset.getTbody($P.ctrl.dataset, t.found, t.notFound, t.replacer);
 		$P.renderCrdnList(obj["Total"], $P.ctrl.dataset.length, trs, option);
 
-	    Apply.fromDataset.paging($P.ctrl.dataset, obj, "crdnPaging--${pageName}");
+	    Apply.fromDataset.paging($P.ctrl.dataset, obj, $P.find("crdnPaging"), $P.find("crdnPagingInfo"));
 	};
 
 	$P.ctrl.dataset.onCurrentChange = (dataItem) => {
@@ -286,7 +286,7 @@ $(document).ready(function(){
 		searchForm.find("input[type='hidden']").val("");
 		searchForm.find("select").each(function(){ $(this).find("option:eq(0)").prop("selected", true); });
 
-		$("#byOutput--${pageName}").val("동적 검색");
+		$P.$find("byOutput").val("동적 검색");
 		$('#schCvlcptRcptYmdFrom--${pageName}').datepicker('setDate', DateUtil.getDateDay(-365).date);
 	    $('#schCvlcptRcptYmdTo--${pageName}').datepicker('setDate', TODAY());
 
@@ -549,7 +549,7 @@ $(document).ready(function(){
 	$P.$find("btnExcel").on('click', () => $P.fnExcelDown());
 	
 	// 동적검색에서 엔터(Enter) 키를 누르면 검색한다.
-	$("#term--${pageName}").onEnterPress($P.searchCrdnList);
+	$P.$find("term").onEnterPress($P.searchCrdnList);
 	
 	$P.$find("btnDelete").on("click", () => $P.fnRemove());
 	$P.$find("btnOpenCvlcptOrgnl").on("click", () => $P.fnOpenCvlcptOrgnl());
diff --git a/src/main/webapp/WEB-INF/jsp/fims/cvlc/cvlc04010-main.jsp b/src/main/webapp/WEB-INF/jsp/fims/cvlc/cvlc04010-main.jsp
index 9f86117c..fc8e63a2 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/cvlc/cvlc04010-main.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/cvlc/cvlc04010-main.jsp
@@ -53,10 +53,11 @@
 		    <div>
 		        <span class="container-page-btn">
 		            <div class="d-flex flex-row justify-content-between">
-						<span id="dmndPaging--${pageName}PagingInfo" class="dataTables_info"
-							role="status" aria-live="polite"></span>
-		                 <ul id="dmndPaging--${pageName}" class="pagination pagination-primary">
-		                 </ul>
+						<span is="paging-info" data-ref-doctx="${pageName}" name="dmndPagingInfo" 
+						class="dataTables_info"></span>
+		                <ul name="dmndPaging"
+		                class="pagination pagination-primary">
+		                </ul>
 					</div>
 		            <span class="container-window-btn-right">
 		            	<button type="button" name="btnOpenDmndPop"
@@ -74,9 +75,8 @@
 					<div name="table-responsive" 
 					class="table-responsive ox-scroll oy-scroll h-px-600">
 						<table class="table-layout-fixed datatables-ajax table table-bordered dataTable no-footer">
-							<thead id="dmndThead--${pageName}" class="sticky-thead">
-								<tr data-by="by--${pageName}" data-by-output="byOutput--${pageName}"
-									data-main-option="mainOption--${pageName}" data-sub-option="subOption--${pageName}">
+							<thead name="dmndThead" class="sticky-thead">
+								<tr data-search-target="[data-doctx='${pageName}']">
 									<th style="width: 80px;">No.</th>
 									<th style="width: 180px;">요청일시</th>
 									<th style="width: 180px;">요청자</th>
@@ -203,7 +203,7 @@ $(document).ready(function(){
 		var trs = Apply.fromDataset.getTbody($P.ctrl.dataset, t.found, t.notFound, t.replacer);
 		$P.renderDmndList(obj["Total"], $P.ctrl.dataset.length, trs, option);
 
-	    Apply.fromDataset.paging($P.ctrl.dataset, obj, "dmndPaging--${pageName}");
+	    Apply.fromDataset.paging($P.ctrl.dataset, obj, $P.find("dmndPaging"), $P.find("dmndPagingInfo"));
 	};
 
 	$P.ctrl.dataset.onCurrentChange = (dataItem) => {
diff --git a/src/main/webapp/WEB-INF/jsp/fims/mngt/mngt01010-main.jsp b/src/main/webapp/WEB-INF/jsp/fims/mngt/mngt01010-main.jsp
index f823caae..32a47bc2 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/mngt/mngt01010-main.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/mngt/mngt01010-main.jsp
@@ -34,8 +34,10 @@
 		    <div>
 		        <div id="gridbuttonArea--${pageName}" class="container-page-btn">
 		            <div class="d-flex flex-row justify-content-between">
-						<span id="ntcPaging--${pageName}PagingInfo" class="dataTables_info" role="status" aria-live="polite"></span>
-		                <ul id="ntcPaging--${pageName}" class="pagination pagination-primary">
+						<span id="ntcPaging--${pageName}PagingInfo" name="ntcPagingInfo"
+						class="dataTables_info"></span>
+		                <ul name="ntcPaging"
+		                class="pagination pagination-primary">
 		                </ul>
 					</div>
 					
@@ -148,7 +150,7 @@ $(document).ready(function(){
 		var trs = Apply.fromDataset.getTbody($P.ctrl.dataset, t.found, t.notFound, t.replacer);
 		$P.renderNtcList(obj["Total"], $P.ctrl.dataset.length, trs, option);
 		
-		Apply.fromDataset.paging($P.ctrl.dataset, obj, "ntcPaging--${pageName}");
+		Apply.fromDataset.paging($P.ctrl.dataset, obj, $P.find("ntcPaging"), $P.find("ntcPagingInfo"));
 	};
 
 	$P.ctrl.dataset.onCurrentChange = (dataItem) => {
diff --git a/src/main/webapp/WEB-INF/jsp/fims/ogdp/ogdp02010-main.jsp b/src/main/webapp/WEB-INF/jsp/fims/ogdp/ogdp02010-main.jsp
index 3cb7c8a2..c194c613 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/ogdp/ogdp02010-main.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/ogdp/ogdp02010-main.jsp
@@ -56,8 +56,10 @@
 		    <div>
 		        <div id="gridbuttonArea--${pageName}" class="container-page-btn">
 		            <div class="d-flex flex-row justify-content-between">
-						<span id="deptPaging--${pageName}PagingInfo" class="dataTables_info" role="status" aria-live="polite"></span>
-		                <ul id="deptPaging--${pageName}" class="pagination pagination-primary">
+						<span id="deptPaging--${pageName}PagingInfo" name="deptPagingInfo"
+						class="dataTables_info"></span>
+		                <ul name="deptPaging"
+		                class="pagination pagination-primary">
 		                </ul>
 					</div>
 					
@@ -178,7 +180,7 @@ $(document).ready(function(){
 		var trs = Apply.fromDataset.getTbody($P.ctrl.dataset, t.found, t.notFound, t.replacer);
 		$P.renderDeptList(obj["Total"], $P.ctrl.dataset.length, trs, option);
 		
-		Apply.fromDataset.paging($P.ctrl.dataset, obj, "deptPaging--${pageName}");
+		Apply.fromDataset.paging($P.ctrl.dataset, obj, $P.find("deptPaging"), $P.find("deptPagingInfo"));
 	};
 
 	$P.ctrl.dataset.onCurrentChange = (dataItem) => {
diff --git a/src/main/webapp/WEB-INF/jsp/include/tail.jsp b/src/main/webapp/WEB-INF/jsp/include/tail.jsp
index b9960687..1432a20e 100644
--- a/src/main/webapp/WEB-INF/jsp/include/tail.jsp
+++ b/src/main/webapp/WEB-INF/jsp/include/tail.jsp
@@ -59,6 +59,8 @@
 <!-- 커스텀UI -->
 <script src="<c:url value="/webjars/applib/js/componentization.js?${ver}"/>"></script>
 <script src="<c:url value="/resources/js/fims/cmmn/fims-componentization.js?${ver}"/>"></script>
+<script src="<c:url value="/resources/js/fims/cmmn/customElements.js?${ver}"/>"></script>
+
 
 <!-- endbuild -->
 <c:set var="functions" scope="request">
diff --git a/src/main/webapp/resources/js/fims/cmmn/customElements.js b/src/main/webapp/resources/js/fims/cmmn/customElements.js
new file mode 100644
index 00000000..da201755
--- /dev/null
+++ b/src/main/webapp/resources/js/fims/cmmn/customElements.js
@@ -0,0 +1,11 @@
+class PagingInfoSpan extends HTMLSpanElement {
+	constructor() {
+		super();
+		let nm = this.getAttribute("name");
+		let a = nm.substr(0,nm.indexOf("PagingInfo"))	
+		let b = this.getAttribute("data-ref-doctx");
+		this.id = a+"--"+b+"PagingInfo";	
+	}
+}
+	
+customElements.define("paging-info", PagingInfoSpan, { extends: "span" });
\ No newline at end of file
diff --git a/src/main/webapp/resources/js/fims/cmmn/fims-cmmnUtil.js b/src/main/webapp/resources/js/fims/cmmn/fims-cmmnUtil.js
index ae5250a8..765cd74a 100644
--- a/src/main/webapp/resources/js/fims/cmmn/fims-cmmnUtil.js
+++ b/src/main/webapp/resources/js/fims/cmmn/fims-cmmnUtil.js
@@ -132,11 +132,14 @@ const Apply = {
 			}
 			$(tbody).setCurrentRow(dataset.getKey(dataItem));
 		},
-		paging : function(dataset, resp, navId){
+		paging : function(dataset, resp, navUl, navSpan){
 			
-			$("#"+navId).setPagingInfo({
+			let id = navSpan.id;
+			let pf = id.substr(0,id.indexOf("PagingInfo"));
+			
+			$(navUl).setPagingInfo({
 		        list      : dataset,
-		        prefix    : navId,
+		        prefix    : pf,
 		        totalSize : resp["Total"]
 		    });
 		    
diff --git a/src/main/webapp/resources/js/fims/cmmn/searchUtil.js b/src/main/webapp/resources/js/fims/cmmn/searchUtil.js
index bf85b600..a7f1a367 100644
--- a/src/main/webapp/resources/js/fims/cmmn/searchUtil.js
+++ b/src/main/webapp/resources/js/fims/cmmn/searchUtil.js
@@ -2,18 +2,34 @@
 * 그리드의 특정 열 값을 키워드로 자료 조회
 **************************************************************************/
 function searchFromGridTitle(byValue, byOutputValue, mainOption, subOption){
-	var trDataset = event.target.parentElement.dataset;
+	var tr = event.target.parentElement;
+	
+	if($(tr).attr("data-search-target").length < 1){
+		var trDataset = tr.dataset;
 
-	var byElementId = trDataset.by;
-	var byOutputElementId = trDataset.byOutput;
-	var mainOptionElementId = trDataset.mainOption;
-	var subOptionElementId = trDataset.subOption;
+		var byElementId = trDataset.by;
+		var byOutputElementId = trDataset.byOutput;
+		var mainOptionElementId = trDataset.mainOption;
+		var subOptionElementId = trDataset.subOption;
 
-	document.getElementById(byElementId).value = snakeToCamel(byValue);
-	document.getElementById(byOutputElementId).value = byOutputValue;
+		document.getElementById(byElementId).value = snakeToCamel(byValue);
+		document.getElementById(byOutputElementId).value = byOutputValue;
 
-	document.getElementById(mainOptionElementId).value = mainOption;
-	document.getElementById(subOptionElementId).value = subOption;
+		document.getElementById(mainOptionElementId).value = mainOption;
+		document.getElementById(subOptionElementId).value = subOption;
+	} else {
+		
+		let byEl = $($(tr).attr("data-search-target")).find("[name='by']");
+		let byOutputEl = $($(tr).attr("data-search-target")).find("[name='byOutput']");
+		let mainOptionEl = $($(tr).attr("data-search-target")).find("[name='mainOption']");
+		let subOptionEl = $($(tr).attr("data-search-target")).find("[name='subOption']");
+		
+		byEl.value = snakeToCamel(byValue);
+		byOutputEl.value = byOutputValue;
+		mainOptionEl.value = mainOption;
+		subOptionEl.value = subOption;
+	}
+	
 }
 
 /**************************************************************************