⚠ 이 글은 2년 이상 지난 이야기에요. 읽으실때 참고!
jquery filter, 실시간 검색
테이블이나 리스트형식의 데이터를 jquery filter와 toggle을 응용해 구현한 코드입니다.
실시간 검색 물씬 남.
HTML(Laravel Blade Template)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<div class="wrap_table">
<div class="row justify-content-between mb-4">
<div class="col-12 col-md-6">
<i class="fas fa-circle fc_gray"></i>
<span class="mr-3">사례 미시행</span>
<i class="fas fa-circle fc_sub"></i>
<span class="mr-3">사례 시행</span>
<i class="fas fa-circle fc_point"></i>
<span>수련과장 승인</span>
</div>
<div class="md-input form_search col-12 col-md-6 col-lg-4">
<input type="text" name="keyword" class="md-form-control" placeholder="분야명으로 검색" onkeyup="tableFilter(this)">
<span class="bar"></span>
<button class="btn __nude search_ico"><i class="fal fa-search"></i> <span class="hidden">검색</span></button>
</div>
</div>
<table class="table">
<caption>임상술기</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col" class="text_left">임상분야</th>
<th scope="col">사례</th>
</tr>
</thead>
<tbody id="procedureTableBody">
@foreach($procedures as $procedure)
<tr role="button" onclick="openClinic({{ $procedure->id }})">
<td>{{ $procedure->order }}</td>
<td class="text_left fc_black">{{ $procedure->title }}</td>
<td>
@for($i = 0; $i < $procedure->case; $i++)
@isset($procedure->clinics[$i])
@if($procedure->clinics[$i]->approved_at)
<i class="fas fa-circle fc_point"></i>
@else
<i class="fas fa-circle fc_sub"></i>
@endif
@else
<i class="fas fa-circle fc_gray"></i>
@endisset
@endfor
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
|
cs |
Line 12의 input 태그에 onkeyup="tableFilter(this)" 으로 필터가 작동됨.
Script
|
1
2
3
4
5
6
7
8
|
<script>
function tableFilter(e) {
var value = e.value.toLowerCase();
$('#procedureTableBody tr').filter(function() {
$(this).toggle($(this).children('td:nth-child(2)').text().toLowerCase().indexOf(value) > -1);
});
}
</script>
|
cs |
테이블 행의 모든 데이터를 기준으로 필터를 하고싶으면 .children('td:nth-child(2)') 를 빼면 됨.
위 스크립트는 테이블의 2번째 열(Demo의 '임상분야')을 필터링 기준으로 삼음.
Demo
D.2021-02-16
V.305