JqueryUI 슬라이더를 사용하여 범위 필터 데이터 테이블 결과

Question

ColumnFilter 플러그인을 사용하여 각 열의 필터를 Datatables에 렌더링하고 있습니다.

ColumnFilter는 표의 '범위'필터링을 수행하기 위해 두 개의 입력 상자 (&부터)를 렌더링합니다.

입력란을 jqueryUI 슬라이더로 바꾸려고하는데 작동하지 않는 것 같습니다.

//SLIDER 

$(function() { 
    var $slider = $('#Slider'), 
    $lower = $('input#Min'), 
    $upper = $('input#Max'), 
    min_rent = 0, 
    max_rent = 400; 

$lower.val(min_rent); 
$upper.val(max_rent); 

$('#Slider').slider({ 
    orientation: 'horizontal', 
    range: true, 
    animate: 200, 
    min: 0, 
    max: 400, 
    step: 1, 
    value: 0, 
    values: [min_rent, max_rent], 
    slide: function(event,ui) { 
     $lower.val(ui.values[0]); 
     $upper.val(ui.values[1]); 
    } 
}); 

$lower.change(function() { 
    var low = $lower.val(), 
     high = $upper.val(); 
    low = Math.min(low, high); 
    $lower.val(low); 
    $slider.slider('values', 0, low); 
}); 

$upper.change(function() { 
    var low = $lower.val(), 
high = $upper.val(); 
    high = Math.max(low, high); 
    $upper.val(high); 
    $slider.slider('values', 1, high); 
}); 


}); 

이 잘 작동하고 내가 값을 변경하려면 두 개의 입력 상자에 변경 볼 수 있습니다

나는 슬라이더 컨트롤 다음 코드로 '너무'입력 & '에서'두 개의 별도을 관리해야 슬라이더를 움직일 때.

그러나 ColumnFilter 플러그인에 의해 렌더링되는 두 개의 입력 상자에 대해 입력 # Min 및 inut # Max 요소를 바꿔 넣을 때. 아무것도 일어나지 않는 것 같습니다. 입력 상자에서 값을 업데이트 할 수 없으며 테이블이 예상대로 자동 정렬되지 않습니다.

아마 내가 잘못된 방향으로 접근하고 있습니까? Datatables 및 Columnfilter 플러그인으로 슬라이더를 작동시키는 다른 방법이 있습니까?

감사합니다.

Answer 1

필터링에 사용되는 두 개의 입력 상자가 변경 이벤트에 대해 '듣기'되고 있지만 UI 슬라이더를 통해 값을 업데이트해도 트리거되지 않습니다.

나는 슬라이드에서 변경하고 싶지 않았던 변경 사항에 동적 내용이로드되어 있기 때문에 비슷한 문제가 발생하여 sliderstop (이벤트는 마우스를 올리면 슬라이더로 트리거 됨)에 강제로 생성되었습니다.) 너무 슬라이드에.

시도 :

$lower.change(); 
$upper.change(); 

val();

으로 값을 업데이트하는 작업을해야 후 :