[Datatable] 원하는 컬럼만 보이도록 컬럼 필터링 화면 설정하기

Datatable에 컬럼이 너무 많아져서, 스크롤이 생겨 가독성이 떨어질 때

컬럼을 선택하여 볼 수 있도록 컬럼 설정 창을 생성해보자!

 

1. 컬럼을 설정할 수 있는 페이지로 가는 버튼 생성

<button class="btn btn-default" id=btn_view_columns style="margin-left:3px;">컬럼 설정</button>

- 이 버튼 클릭 시 설정 페이지 modal 창이 팝업 될 수 있도록 이벤트를 걸어준다.

$("#btn_view_columns").click( function() {
		
		$('#modal_view_columns').modal('toggle');

	});

 

2. 설정 모달 창 생성

<div id="modal_view_columns" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" style="width:800px;height:700px">
        <div class="modal-content">
			<div class="modal-header bg-primary">
				<h4 class="modal-title">컬럼 설정</h4>
			</div>
			<div class="modal-body">
				<c:forEach var="entry" items="${type_columns}" varStatus="i">
				<c:set var="type" value="${entry.key}"/>
					<div class="form-group" <c:if test="${i.last}">style='border-bottom:0px'</c:if>>
						<label>${entry.value}</label>
						<button type="button" class="btn btn-default" onclick="javascript:selectColumns('${type}')">전체</button><br>
						<c:forEach items="${all_columns[type]}" var="map">
						<div class="checkbox checkbox-inline" style="margin-left:12px">
							<input id=${map.key} class="styled" name="column_${type}" type="checkbox">
							<label for=${map.key}>${map.value}</label>
						</div>
						</c:forEach>
					</div>
				</c:forEach>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" id="btn_modal_view_column_ok" >확인</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">닫기</button>
			</div>
        </div>
    </div>
</div>

- 모달 창은 아래와 같이 생겼는데, 체크박스를 사용하여 보여 줄 컬럼을 지정할 수 있다.

3.항목 세팅하기

- modal의 반복문을 보면, column type에 따라 반복문을 도는데, 

여기서는 일단 한 개의 type과 4개의 컬럼을 지정해보았다.

 

	public LinkedHashMap<String, String> getColumnType() throws Exception
	{
		LinkedHashMap<String, String> map = new LinkedHashMap();
		map.put("KEY", "기본");
		
		return map;
	}
	public Map<String, LinkedHashMap<String, String>> getColumns()
	{
		Map<String, LinkedHashMap<String, String>> map = new HashMap();

		LinkedHashMap<String, String> columns_req = new LinkedHashMap();
				
		columns_req.put("deptname", "컬럼1");
		columns_req.put("reqdatetime", "컬럼2");
		columns_req.put("reqenddatetime", "컬럼3");
		columns_req.put("reqdesc", "컬럼4");
		
		map.put("KEY", columns_req);
		
		return map;
	}

	LinkedHashMap<String, String> typeColumns = getColumnType();
	request.setAttribute("type_columns", typeColumns);
	Map<String, LinkedHashMap<String, String>> allColumns = getColumns();
	request.setAttribute("all_columns", allColumns);

 

이제 각 버튼 컨트롤 부분을 만들어준다.