如何使jScrollPane和uiTableFilter一起工作

Question

這是一個基本示例：http://jsfiddle.net/KFHyG/5顯示了2個插件。

我該如何做到這一點： 1.這適用於頁面上的多個過濾器。 2. jScroller重新初始化。請參閱我已添加代碼但無法正常工作。

var scroller = $('.scroller'); 
    scroller.jScrollPane({ 
     verticalDragMinHeight: 60, 
     verticalDragMaxHeight: 60, 
     showArrows: true, 
     arrowScrollOnHover: true 
    }); 
    jScroller = scroller.data("jsp"); 

    $(".search").keyup(function() { 
     $.uiTableFilter($("table.searchme"), this.value); 
     jScroller.reinitialise(); 
    }); 

Answer 1

爲了這個工作，你需要區分表和scrollpanes。

Here's a working example

HTML

<input type="text" class="search" data-id="1" /> 

<div id="scroller_1" class="scroller"> 
    <table class="searchme_1"> 
     <thead> 
      <tr> 
       <th scope="col"> 
        Product Name</th> 
       <th scope="col"> 
        Description</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Large product0</td> 
       <td><a href="http://example.com">Find out more</a></td> 
      </tr> 
      <tr> 
       <td>Large product1</td> 
       <td><a href="http://example.com">Find out more</a></td> 
      </tr> 
      <tr> 
       <td>Large product2</td> 
       <td><a href="http://example.com">Find out more</a></td> 
      </tr> 
      <tr> 
       <td>Large product3</td> 
       <td><a href="http://example.com">Find out more</a></td> 
      </tr> 
      <tr> 
       <td>Large product4</td> 
       <td><a href="http://example.com">Find out more</a></td> 
      </tr> 
      <tr> 
       <td>Large product5</td> 
       <td><a href="http://example.com">Find out more</a></td> 
      </tr> 
      <tr> 
       <td>Large product6</td> 
       <td><a href="http://example.com">Find out more</a></td> 
      </tr> 
      <tr> 
       <td>Large product7</td> 
       <td><a href="http://example.com">Find out more</a></td> 
      </tr> 
      <tr> 
       <td>Large product8</td> 
       <td><a href="http://example.com">Find out more</a></td> 
      </tr> 
      <tr> 
       <td>Large product9</td> 
       <td><a href="http://example.com">Find out more</a></td> 
      </tr> 
      <tr> 
       <td>Large product10</td> 
       <td><a href="http://example.com">Find out more</a></td> 
      </tr> 
      <tr> 
       <td>Large product11</td> 
       <td><a href="http://example.com">Find out more</a></td> 
      </tr> 
      <tr> 
       <td>Large product12</td> 
       <td><a href="http://example.com">Find out more</a></td> 
      </tr> 
     </tbody> 
    </table> 
</div> 
<br /> 
<hr /> 
<br /> 

<input type="text" class="search" data-id="2" /> 
<div id="scroller_2" class="scroller"> 
    <table class="searchme_2"> 
     <thead> 
      <tr> 
       <th scope="col"> 
        Product Name</th> 
       <th scope="col"> 
        Description</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Large product0</td> 
       <td><a href="http://example.com">Find out more</a></td> 
      </tr> 
      <tr> 
       <td>Large product1</td> 
       <td><a href="http://example.com">Find out more</a></td> 
      </tr> 
      <tr> 
       <td>Large product2</td> 
       <td><a href="http://example.com">Find out more</a></td> 
      </tr> 
      <tr> 
       <td>Large product3</td> 
       <td><a href="http://example.com">Find out more</a></td> 
      </tr> 
      <tr> 
       <td>Large product4</td> 
       <td><a href="http://example.com">Find out more</a></td> 
      </tr> 
      <tr> 
       <td>Large product5</td> 
       <td><a href="http://example.com">Find out more</a></td> 
      </tr> 
      <tr> 
       <td>Large product6</td> 
       <td><a href="http://example.com">Find out more</a></td> 
      </tr> 
      <tr> 
       <td>Large product7</td> 
       <td><a href="http://example.com">Find out more</a></td> 
      </tr> 
      <tr> 
       <td>Large product8</td> 
       <td><a href="http://example.com">Find out more</a></td> 
      </tr> 
      <tr> 
       <td>Large product9</td> 
       <td><a href="http://example.com">Find out more</a></td> 
      </tr> 
      <tr> 
       <td>Large product10</td> 
       <td><a href="http://example.com">Find out more</a></td> 
      </tr> 
      <tr> 
       <td>Large product11</td> 
       <td><a href="http://example.com">Find out more</a></td> 
      </tr> 
      <tr> 
       <td>Large product12</td> 
       <td><a href="http://example.com">Find out more</a></td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

JAVASCRIPT

$(document).ready(function() { 
    var options = { 
     verticalDragMinHeight: 60, 
     verticalDragMaxHeight: 60, 
     showArrows: true, 
     arrowScrollOnHover: true 
    } 

    var scroller_1 = $('#scroller_1'); 
    scroller_1.jScrollPane(options); 
    var jScroller_1 = scroller_1.data("jsp"); 

    var scroller_2 = $('#scroller_2'); 
    scroller_2.jScrollPane(options); 
    var jScroller_2 = scroller_2.data("jsp"); 

    $(".search").keyup(function() { 
     $.uiTableFilter($("table.searchme_" + $(this).attr('data-id')), this.value); 
     eval("jScroller_" + $(this).attr('data-id')).reinitialise(); 
    });  
});