Index: arms/html/pdServiceVersion/content-container.html
===================================================================
diff -u -rba2dfae4fd75befb0dae409f7a910c4c838e7cb3 -r7c6ea182d9f52db6970ba5d6ffe6c7d5a36653ec
--- arms/html/pdServiceVersion/content-container.html	(.../content-container.html)	(revision ba2dfae4fd75befb0dae409f7a910c4c838e7cb3)
+++ arms/html/pdServiceVersion/content-container.html	(.../content-container.html)	(revision 7c6ea182d9f52db6970ba5d6ffe6c7d5a36653ec)
@@ -2,51 +2,38 @@
 	<section class="widget">
 		<header>
 			<h4>
-				<span class="font13" style="font-weight: bold">
-					<i class="fa fa-sort-amount-asc"></i> 제품(서비스) 조회
-				</span>
+                <span class="font13" style="font-weight: bold;">
+                    <i class="fa fa-edit"></i> 제품(서비스) 조회 및 선택
+                </span>
 			</h4>
-			<div class="actions">
-				<button
-					class="btn btn-transparent btn-xs"
-					onclick="$('#demo').jstree('open_all');"
-				>
-					Show All
-					<i class="fa fa-arrow-down"></i>
-				</button>
+			<div class="widget-controls">
+				<a title="Options" href="#"><i class="glyphicon glyphicon-cog"></i></a>
+				<a data-widgster="expand" title="Expand" href="#"><i class="glyphicon glyphicon-chevron-up"></i></a>
+				<a data-widgster="collapse" title="Collapse" href="#"><i
+						class="glyphicon glyphicon-chevron-down"></i></a>
+				<a data-widgster="close" title="Close" href="#"><i class="glyphicon glyphicon-remove"></i></a>
 			</div>
 		</header>
 		<div class="body">
-			<div class="wrapper">
-				<div id="mmenu" style="padding-bottom: 5px">
-					<form class="form-search no-margin" role="form">
-						<div class="input-group">
-							<input
-								type="search"
-								id="text"
-								class="form-control searchDarkBack"
-								style="color: #f8f8f8"
-								placeholder="찾을 노드 이름 입력"
-								data-tooltip="Press Enter To Node To Search"
-							/>
-							<span class="input-group-btn">
-								<button
-									type="button"
-									id="search"
-									title="Search"
-									class="btn btn-default btn-sm"
-								>
-									Search
-								</button>
-							</span>
-						</div>
-					</form>
+			<blockquote class="font13">
+				1. 제품(서비스) 선택
+			</blockquote>
+			<div class="box box-primary" style="background: rgba(51, 51, 51, 0.225); margin-bottom: 5px !important;">
+				<div class="box-body">
+					<table id="pdserviceTable" class="display responsive no-wrap" cellspacing="0">
+						<thead>
+						<tr>
+							<th>c_id</th>
+							<th>c_title</th>
+						</tr>
+						</thead>
+					</table>
 				</div>
-				<div id="productTree" style="padding-top: 5px" class="darkBack"></div>
-				<div style="margin-top: 10px" class="darkBack">설명</div>
 			</div>
 		</div>
 	</section>
+</div>
+<div class="col-lg-3">
 	<section class="widget">
 		<header>
 			<h5>
@@ -60,7 +47,7 @@
 	</section>
 </div>
 
-<div class="col-lg-8">
+<div class="col-lg-5">
 	<section class="widget">
 		<header>
 			<h4>
Index: arms/js/pdServiceVersion.js
===================================================================
diff -u -r4938de3ac9391afc420adbb9110a5b9d369a1ff5 -r7c6ea182d9f52db6970ba5d6ffe6c7d5a36653ec
--- arms/js/pdServiceVersion.js	(.../pdServiceVersion.js)	(revision 4938de3ac9391afc420adbb9110a5b9d369a1ff5)
+++ arms/js/pdServiceVersion.js	(.../pdServiceVersion.js)	(revision 7c6ea182d9f52db6970ba5d6ffe6c7d5a36653ec)
@@ -1,6 +1,5 @@
 $(function () {
     setSideMenu("sidebar_menu_product", "sidebar_menu_version_manage");
-    jsTreeBuild("#productTree", "pdservice");
     $(".btn-info").click(function () {
         var index = $("label.btn-sm.active").index();
         index === 0
@@ -9,6 +8,57 @@
     });
 });
 
+$(function () {
+    jstreeDataTableReload();
+    $(".dataTables_length").find("select:eq(0)").addClass("darkBack");
+    $(".dataTables_length").find("select:eq(0)").css("min-height", "30px");
+    //min-height: 30px;
+
+    $("body").find("[aria-controls='pdserviceTable']").css("width", "100px");
+    $("select[name=pdserviceTable_length]").css("width", "50px");
+});
+
+// --- 데이터 테이블 설정 --- //
+function jstreeDataTableReload() {
+    console.log("href: " + $(location).attr("href"));
+    console.log("protocol: " + $(location).attr("protocol"));
+    console.log("host: " + $(location).attr("host"));
+    console.log("pathname: " + $(location).attr("pathname"));
+    console.log("search: " + $(location).attr("search"));
+    console.log("hostname: " + $(location).attr("hostname"));
+    console.log("port: " + $(location).attr("port"));
+
+    var isDevelopingToRoute = "/auth-user";
+
+    var tempDataTable = $("#pdserviceTable").DataTable({
+        ajax: {
+            url: isDevelopingToRoute + "/api/arms/pdservice/getMonitor.do",
+            dataSrc: "",
+        },
+        destroy: true,
+        processing: true,
+        responsive: false,
+        columns: [
+            { data: "c_id" },
+            { data: "c_title" }
+        ],
+        columnDefs: [
+            {
+                targets: -1,
+                className: 'dt-body-left'
+            }
+        ]
+    });
+
+    $("#pdserviceTable tbody").on("click", "tr", function () {
+
+        $(this).toggleClass('selected');
+        var data = tempDataTable.row(this).data();
+        console.log(data);
+        //alert( 'You clicked on '+ data.c_title +'\'s row' );
+    });
+}
+
 // --- 에디터 설정 --- //
 CKEDITOR.replace("editor");
 CKEDITOR.replace("modal-editor");