2014-07-17 2 views
0

동적으로 생성 된 행이있는 datatable (datatables.net)이 있습니다. 데이터 테이블 위에 "검색"상자가 있습니다. 지금 당장 당신은 상자에 타이핑을 시작할 수 있습니다. 그리고 나는 타입 어 헤드에 원하는 행을 선택할 수있는 옵션을 제공합니다. (이름을 입력하기 시작하면 선행 이름은 버스 정류장 이름 옵션을 제공합니다. 각 행은 버스 정류장을 기반으로합니다. 버스 스케줄에서). 그런 다음 표시되는 올바른 이름을 선택할 수 있습니다.Twitter Typeahead.js ScrollTo가 작동하지 않습니다.

현재로서는 검색 창에서 버스 정류장을 선택하지 않아도됩니다. Enter를 누르거나 선행 결과를 클릭하여 선택할 수 있습니다.

내가 원하는 것은 데이터 테이블에서 해당 이름의 행으로 스크롤하기 위해 scrollTo (http://flesler.blogspot.com/2007/10/jqueryscrollto.html 버전 1.4.1)을 사용하는 것입니다. 여기

내 코드입니다 :

HTML

<div> 
    <label>Search:</label> 
    <input id="table_Search" class="tblSearch busStop span2 typeahead" type="text"></input>   
</div> 

JAVASCRIPT

function addTableSearch(dTable, $container, schedule, stops){ 
     //while the bus schedule and bus schedule stops exist 
     if(schedule !==undefined && schedule.stops !== undefined){ 
     //getting the future stops 
      var notPassed = Fp.filter(schedule.stops, function (stop) { 
             return !stop.passed; }); 
       var selector = $container 
        .typeahead({ 
         source : Fp.pluck(notPassed, 'busStopName'), 
         items : 15 
         }); 
        $('#bus-tab .dataTables_scrollBody').scrollTo(selector); 

} 

addTableSearch(dTable, $('.tblSearch'), schedule.content.get(), schedule.stops); 

내가이 선행 입력으로 "VAR 선택"을 지정할 수 있다고 생각하지 않습니다,하지만 난 '수 형용사에서 원하는 것을 선택한 후에 scrollTo를 트리거하는 또 다른 방법을 생각해보십시오.

제안/도움주세요.

답변

0

내 해결책을 찾았습니다!

function addTableSearch(dTable, $container, schedule, stops){ 
    //while the bus schedule and bus schedule stops exist 
    if(schedule !==undefined && schedule.stops !== undefined){ 
    //getting the future stops 
     var notPassed = Fp.filter(schedule.stops, function (stop) { 
             return !stop.passed; 
            }); 
      var sequence; 
      $container.typeahead({ 
       source : Fp.pluck(notPassed, 'busStopName'), 
       items : 15, 
       updater : function(item) { 
        // item is item selected from typeahead 
        var busStopArray = []; 
        $.each(schedule.stops, function(index, value) { 
         busStopArray[index] = value.busStopName 
           + " - " + value.sequence; 
         if (value.busStopName === item) { 
          sequence = value.sequence; 
         } 
        }); 

       var selector = 'tr[data-sequence="' + sequence + '"]'; 
       $('#firstSchedule-tab .dataTables_scrollBody').scrollTo(selector); 
       $('#secondSchedule-tab .dataTables_scrollBody').scrollTo(selector); 


} 

addTableSearch(dTable, $('.tblSearch'), schedule.content.get(), schedule.stops); 
관련 문제