0

これは基本的な例です：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();
    });
4

1 に答える 1

0

これを機能させるには、テーブルとスクロールペインの両方を区別する必要があります。

これが実際の例です

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();
    });    
});
于 2012-10-18T12:33:22.757 に答える