2017-12-19 4 views
1

저는 DataTables 및 jQuery를 사용하여 검색 상자를 사용하여 표를 필터링하는 확인란 집합을 만듭니다. 이것은 http://www.lynden.com/about/brochures-test.html에 완전히 구현됩니다. 기본적으로 확인란을 사용하여 옵션을 선택하면 해당 옵션이 문자열로 사용되어 DataTables 검색 상자에 삽입됩니다. caseInsensitive 기능은 사전 필터링없이 입력을 검색 상자에 입력 할 때 작동하지 않는 경우를 제외하고는 이상하게 작동합니다. 더 나쁜 것은 "mi"로 검색 할 때 Dynamic이라는 단어로 세 가지 결과가 나오지만 은하계 회사 범주를 완전히 무시한다는 것입니다. 누구도 무심코 검색 케이스를 정렬 할 수있는 이유를 알고 있지만 대문자로 시작하는 단어의 시작을 무시합니다.DataTables 대소 문자를 구분하지 않음 검색 문제

$('.dropdown-container') 
.on('click', '.dropdown-button', function() { 
    $('.dropdown-list').toggle(); 
}) 
.on('input', '.dropdown-search', function() { 
    var target = $(this); 
    var search = target.val().toLowerCase(); 
console.log(search); 
    if (!search) { 
     $('li').show(); 
     return false; 
    } 

    $('li').each(function() { 
     var text = $(this).text().toLowerCase(); 
     var match = text.indexOf(search) > -1; 
     $(this).toggle(match); 
    }); 
}) 
.on('change', '[type="checkbox"]', function() { 
    var numChecked = $('[type="checkbox"]:checked').length; 
    $('.quantity').text(numChecked || 'Any'); 
}); 

$(document).ready(function() { 
table = $('#brochure').DataTable({ 
    "search": { 
"caseInsensitive": true 
    }, 
    "pageLength": 25, 
    "order": [ 
       [2, "desc"] 
      ], 
    "lengthMenu": [ 
       [25, 50, 75, -1], 
       [25, 50, 75, "All"] 
      ], 
    "columnDefs": [{ 
     "targets": [2, 4, 5], 
     "visible": false 
      }] 
}); 
var pID = location.search; //grab everything after and including the "?" in the URL 
console.log(pID); 
mloc = pID.indexOf("=") + 1; //identify the location of the actual value 
pID = pID.slice(mloc) // captures the value of the parameter 
table.search(pID, [1, 2, 3, 4], true, false, false, true).draw(); // assigns the parameter to the hidden input tag's value 
}) 

function filter() { 
//build a industry string 
var filters = $('input:checkbox[name="filter"]:checked').map(function() { 
    return this.value; 
}).get().join(' '); 
console.log(filters); 
//now filter in column 3, with a regular expression, no smart filtering, no inputbox, not case sensitive 
table.search(filters, [1, 2, 3, 4], true, false, false, true).draw(); 
} 

이 문제에 대한 도움이 필요하십니까?

답변

0

search() API 방법을 잘못 사용하고 있습니다. 첫 번째로 search()을 잘못 호출하면 테이블이 다르게 동작합니다. 아래 그림과 같이

당신은 그것을 호출해야합니다 : search()에 대한

table.search(pID).draw(); 

table.search(filters).draw(); 

추가 인수가 "스마트"와 대소 문자를 구분 검색을 가능하게하기 때문에 생략 할 수있다.

코드 및 데모는 this example을 참조하십시오.

+0

이것은 아름답게 작동했습니다! 고맙습니다! – Naomi

+0

@Naomi, 귀하의 페이지는 훌륭한 필터로 멋지게 보입니다! –

관련 문제