[DataTable plug-in] 데이터 테이블 컬럼 검색

💡 데이터 테이블 컬럼별 검색 및 검색 초기화 방법 에 대해 작성해 보았습니다.
(※ 정답이 아닐 수 있습니다. 저만의 방법으로 구현했습니다.)

 

 

빠른 결론: 컬럼마다 값을 초기화하고 테이블을 draw 하는 방법이다.

 

 

HTML 준비

검색에 필요한 컬럼 개수만큼 th 태그를 직접 생성해야 한다.

<table class="" id="target_table">
    <thead>
        <tr>
            <th></th>
            <th></th>

            ... 필요한 개수 만큼 ...
            
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

 

 

DataTable 컬럼 생성

1.  target_table의 Id를 가진 테이블 태그의 thead tr을 복사(clone)하고 추가(appendTo)하게 된다.
2. target_table 테이블의 thead tr 중 첫 번째에서 th를 반복문(each)으로 호출하고 html을 추가한다.

$('#target_table thead tr').clone(true).appendTo('#target_table thead');
$('#target_table thead tr:eq(1) th').each( function (i) {
	$(this).html('<input type="text" class="search-input" id="search-input-' + i + '" placeholder="Search" />');
})

 

위 코드를 작성하면 아래와 같은 테이블이 생성 된다.

(단, $(document).ready에서 코드를 작성)

 

두 번째 행의 input 태그

 

 

DataTable 컬럼 검색 및 초기화

1. table의 column(index)를 사용해서 컬럼을 하나씩 불러온다.
2. 불러온 컬럼의 검색 값(search)을 " "로 초기화 해버린다.
3. 모든 컬럼을 초기화 한 다음 draw()로 다시 ajax 요청 보내지고 첫 페이지를 불러올 때와 같이 전체 값을 가져온다.

 // target_table 의 thead 의 첫 번째(0번 째 다음) tr의 자식 th 태그를 for문으로 가져온다.
 $('#target_table thead tr:eq(1) th').each( function (index) {
    table
        .column(index)
        .search("") // 각 컬럼의 값을 "" (초기화) 한다.
 }
 
 table.draw();

 

다시 결론:  테이블 마다의 컬럼 검색 값을 초기화 하고 draw하게 된다.

 

DB에서 LIKE를 사용하면 빈 값(" ")은 전체 데이터를 불러올 것이라고 생각한다.

데이터가 있으면 LIKE 에 걸려서 검색한 값을 일부분 가지고 있는 모든 데이터를 불러온다.

EXAMPLE LIKE #{SEARCH} + '%'

 

---

주의사항

• table.ajax.reload() 또는 table.draw()를 사용해서 ajax 요청을 보낼 수 있는데 두 방법의 차이는 조금 더 공부를 하겠습니다.