Question

This is a basic example: http://jsfiddle.net/KFHyG/5 showing the 2 plugins together.

How can I make it so that:
1. This works with more than one filter on the page.
2. jScroller is reinitialise. See I have added the code but doesn’t work correctly.

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

For this to work, you need to differentiate both tables and 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();
    });    
});