테이블의 특정 열에 대한 범위 검색 필터

예를 들어 내 테이블의 Age 열에서 12 ~ 40 세의 검색 필터를 찾고 있습니다. 테이블의 특정 열에 대한 범위 검색 필터

은 내가 DataTable을 플러그인 범위 검색을 사용하여이 문제를 해결 할 수 있었다하지만 스크롤을 망쳐 놨 내 끈적 끈적한 헤더와 열 폭 등,

는 그래서는 데이터 테이블 스타일을 고정 내 시간을 낭비하지하기로 결정 범위 검색 필터를 만듭니다.
나는 어디에서든지 참조 및 예제를 찾아 보았고 datatables 플러그인 범위 검색을 제외하고는 아무 것도 발견하지 못했습니다.

$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) { 
    var min = parseInt($('#min').val(), 10); 
    var max = parseInt($('#max').val(), 10); 
    var age = parseFloat(data[3]) || 0; // use data for the age column 

    if ((isNaN(min) && isNaN(max)) || 
     (isNaN(min) && age <= max) || 
     (min <= age && isNaN(max)) || 
     (min <= age && age <= max)) 
    { 
     return true; 
    } 
    return false; 
} 
); 

$(document).ready(function() { 
var table = $('#example').DataTable(); 

// Event listener to the two range filtering inputs to redraw on input 
$('#min, #max').keyup(function() { 
    table.draw(); 
}); 
});

이 datatables 플러그인에 의존하지 수 있도록 어쨌든 거기 :

이 코드는?

어떤 도움을 주시면 감사하겠습니다.

출처

2017-11-12 MiLaD A

솜은 단순히 그냥''필터링 할'사용할 수있는'

'에들 ...? – davidkonrad

@davidkonrad 예, 범위에 들지 않는 것들, 방금 자바 스크립트를 배우기 시작했는데, 내가 뭘 찾고 있는지 모르겠군요 ... –

답변

사용자 지정 필터에서 true 또는 false를 반환하면 DataTables가 행을 제외하거나 포함해야하는지 알 수 있습니다. 당신은 jQuerys 'show() 및 hide()이 같은 동작 복제 :

$('#min, #max').keyup(function() { 
    var min = parseInt($('#min').val(), 10); 
    var max = parseInt($('#max').val(), 10); 
    $('#example tbody tr').each(function() { 
    var age = parseFloat($('td:eq(3)', this).text()) || 0; 
    if ((isNaN(min) && isNaN(max)) || 
     (isNaN(min) && age <= max) || 
     (min <= age && isNaN(max)) || 
     (min <= age && age <= max)) { 
     $(this).show() 
    } else { 
     $(this).hide() 
    } 
    }) 
});

http://jsfiddle.net/c48z34xx/

출처

2017-11-12 14:13:19 davidkonrad

그것은 매력처럼 작동했습니다, 선생님, 고마워요! 당신은 내가 아직 이해할 수없는 것들을 읽는 데 수없이 많은 시간을 절약 해주었습니다. :) 그러나 나는 당신의 코드에 기반하여 어떻게 작동하는지 알았습니다. 감사합니다. –

이것은 클라이언트 측 검색 권한입니까? 그것은 SQL 검색 쿼리를 사용하여 서버 측 검색보다 빠릅니까? –

@MiLaDA 환영합니다! 우리는 종종 올바른 방향으로 끌어 당길 필요가 있습니다. 예, 이것은 순수한 dom

을 필터링하는 예제 일뿐입니다. 더 멋진 것들이 필요하다면 DataTables를 사용해야합니다. – davidkonrad

테이블의 특정 열에 대한 범위 검색 필터

답변

관련 문제