[Tabulator] 검색기능 커스터마이징

2021.07.17 - [공부기록/JQUERY] - [Tabulator] 사용법(데이터&테이블 바인딩 라이브러리)

기본 사용방법은 위 포스팅 참조~~

 

구현목표: 기존 컬럼별 검색기능에서 전체 검색 확장하기

Tabulator 라이브러리에서는 컬럼별 검색기능을 제공한다.

html - select, input, button 추가

<div class="row mb-2 justify-content-between">
	<div class="col">
		<button class="btn btn-success" id="create" onclick="fn_popup(registerModal);">등록</button>
	</div>
	<div class="col">
		<div class="row">
			<div class="col-sm-4">
				<select id="filter-field" class="form-control" onchange="updateFilter();">
					<option value="ALL">전체</option>
					<option value="DIC_ID">용어명</option>
					<option value="DIC_NAME">용어설명</option>
					<option value="DIC_PROJECT_NAME">프로젝트</option>
					<option value="DIC_TYPE">구분</option>
				</select>
			</div>
			<div class="col-sm-5">
				<input id="filter-value" type="text" class="form-control" placeholder="value to filter" onkeyup="updateFilter();">
			</div>
			<div class="col-sm-3">
				<button class="btn btn-warning" id="btn_init" onclick="initSearch()">검색 초기화</button>
			</div>
		</div>
	</div>
</div>

select에 onchange, input에 onkeyup, button에 onclick 이벤트를 추가한다.

 

javascript

function allSearch(data, searchWord) {
	
	if(Object.keys(searchWord).length == 0) { //검색어가 비었을때
		return true;
	}
	var dicId = data.DIC_ID.toLowerCase().indexOf(searchWord.toLowerCase());
	var dicName = data.DIC_NAME.toLowerCase().indexOf(searchWord.toLowerCase());
	var dicProjectName = data.DIC_PROJECT_NAME.toLowerCase().indexOf(searchWord.toLowerCase());
	var dicType = data.DIC_TYPE.toLowerCase().indexOf(searchWord.toLowerCase());
	
	return (dicId != -1 ? true : false) || (dicName != -1 ? true : false) || (dicProjectName != -1 ? true : false) || (dicType != -1 ? true : false);
}

function updateFilter() {
	var fieldValue = $("#filter-field").val();
	var searchWord = $("#filter-value").val();
	
	if(fieldValue == "ALL") {				
		table.setFilter(allSearch, searchWord);
	}
	
	else if(fieldValue){
		table.setFilter(fieldValue, "like", searchWord);
	}
	
}

function initSearch() {
	$("#filter-field").val("ALL");
	$("#filter-value").val("");
	table.clearFilter();
}

[1] updateFilter - select에서 옵션을 바꾸거나 검색창에 검색어를 입력할 때마다 이 함수가 출력된다.

table.setFilter(fieldValue, "like", searchWord); // Tabulator에서 제공하는 함수, 인자는 (컬럼명, 비교타입, 검색어)

여기서 비교타입은 다양하다. [=, !=, like, keywords, starts, ends, 부등호, in, regex]

[2] allSearch - 전체 컬럼에서 검색하고 싶을 때

Tabulator에선 커스텀 필터링 기능도 제공한다. 

사용방법은 table.setFilter( customFilter, ... ) 이런식으로 사용한다. 이때 customFilter는 함수이고, 반환값이 boolean이어야 한다. customFilter함수에 인자를 넘기고 싶다면 table.setFilter( customFilter, 인자1, ... ) 이런식으로 써주면 된다.

[3] initSearch - 검색어 초기화 함수

table.clearFilter() 함수를 이용하여 필터링을 초기화시킬 수 있다.