[DataTables] dropdown select search (2가지 방법)

이 테이블에 특정 열만 dropdown으로 search할 수 있는 select 버튼을 만들고자한다.

 

<!-- Create the drop down filter -->
<div class="col-md-4"
style="margin-bottom: 8px; padding-left: 0px">
    <div class="category-filter input-group">
        <div class="input-group-prepend">
            <label class="input-group-text" for="categoryFilter">Office</label>
        </div>
        <select id="categoryFilter" class="form-control">
            <option value="">Show All</option>
            <option value="New York">New York</option>
            <option value="Hip Hop">Hip Hop</option>
            <option value="Jazz">Jazz</option>
        </select>
    </div>
</div>
<!-- drop down filter end -->

html에 dropdown filter 추가

var filter_idx = "Office";
// datatable 생성
var table = $('#dataTable').DataTable();
 
// category filter drop down을 datatables_filter div에 추가
// 이 방식을 사용하여 datatable과 함께 filter 이동 가능
$("#filterTable_filter.dataTables_filter").append($("#categoryFilter"));
 
// 아래 메소드애서 사용 할 filter_idx(Office) 칼럼의 인덱스를 구한다. ($.fn.dataTable.ext.search.push)
// 사용자가 dropdown에서 값을 선택할 때 필터링 할 열을 datatables에게 알려주는 것
// filter_idx(Office)의 값은 필터링 할 열의 헤더에 사용된 것과 동일해야한다.
var categoryIndex = 0;
$("#dataTable th").each(function(i) {
    if ($($(this)).html() == filter_idx) {
        categoryIndex = i; return false;
    }
});
 
// built in datatables API 사용
$.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
        var selectedItem = $('#categoryFilter').val()
        var category = data[categoryIndex];
        if (selectedItem === "" || category.includes(selectedItem)) {
            return true;
        }
        return false;
    }
);
 
// categoryFilter dropdown에 대한 변경 이벤트를 설정하여 매번 datatable redraw
$("#categoryFilter").change(function (e) {
    table.draw();
});
table.draw();

js 코드 추가

 

참고 : https://clintmcmahon.com/add-a-custom-search-filter-to-datatables-header/

---

 

훨씬 간단하고 오류 없는 기능을 찾았다.

이전 방법은 다른 table이더라도 filter을 적용하면 같은 이름의 col에 영향을 끼치는 오류가 있었다.

var filter_idx = "Office";
var table = $('#dataTable').DataTable();
// 이전 코드
/*
$("#filterTable_filter.dataTables_filter").append($("#categoryFilter"));
 
var categoryIndex = 0;
$("#dataTable th").each(function(i) {
    if ($($(this)).html() == filter_idx) {
        categoryIndex = i;
        return false;
    }
});
 
$.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
        var selectedItem = $('#categoryFilter').val()
        var category = data[categoryIndex];
        if (selectedItem === "" || category.includes(selectedItem)) {
            return true;
        }
        return false;
    }
);
 
$("#categoryFilter").change(function(e) {
    table.draw();
});
table.draw();
*/
 
// 새로 추가 된 코드
$('#categoryFilter').on('change', function() {
    table.columns(2).search(this.value).draw(); // 3번째 col인 Office
});
table.draw()

동일한 기능을 한다.

참고 : https://salesforce.stackexchange.com/questions/98577/filter-by-multiple-conditions-drop-downs-using-datatables-table-plug-in-for