api 검색 옵션 추가

src/main/resources/templates/page/list-api.html

@@ -11,6 +11,12 @@
 		th:href="@{/plugins/datatables-responsive/css/responsive.bootstrap4.min.css}">
 	<link rel="stylesheet"
 		th:href="@{/plugins/datatables-buttons/css/buttons.bootstrap4.min.css}">
+		
+	<style type="text/css" class="init">
+        .search-ext {
+            float:right;
+        }
+    </style>
 </th:block>
 
 <div class="content-wrapper" layout:fragment="content">
@@ -66,6 +72,16 @@
 			<!-- /.row -->
 		</div>
 		<!-- /.container-fluid -->
+		
+		<div id="api_search" style="display:none">
+			<label>
+				&nbsp; &nbsp; API그룹:
+				<select id="searchApiGroupName" style="margin-left: 0.5em; height: calc(1.8125rem + 2px); border: 1px solid #ced4da; border-radius: 0.2rem;">
+					<option value="">-- 선택 --</option>
+					<option th:each="apiGroupName : ${apiGroupNameList}" th:value="${apiGroupName}" th:text="${apiGroupName}"></option>
+				</select>
+			</label>
+		</div>
 	</section>
 </div>
 
@@ -103,6 +119,7 @@
 	        "serverSide": true,
 	        "pageLength": 50,
 	        "searchDelay": 1200,
+	        "dom": '<"row"<"col-sm-12 col-md-6"B><"col-sm-12 col-md-6"<"search-ext">f>>rt<"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
 	        "ajax": {
 	            "url": "/manage/rest/apis",
 	            "type": "POST",
@@ -144,9 +161,15 @@
 			],
 			"buttons": ["new", "excel", "colvis"],
 			"initComplete": function() {
-				listApiTable.buttons().container().appendTo('#listApiTable_wrapper .col-md-6:eq(0)');
+				//listApiTable.buttons().container().appendTo('#listApiTable_wrapper .col-md-6:eq(0)');
 		    }
 	    });
+		
+		$('.search-ext').html($('#api_search').html());
+		
+		$("#searchApiGroupName").change(function(){
+			listApiTable.columns(0).search(this.value).draw(); // apiGroupName
+		});
 
 		/*
 		$(".dataTables_filter input").unbind().bind("input", function(e) { // Bind our desired behavior