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

为此，您需要区分表格和滚动窗格。

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();
    });    
});

如何使jScrollPane和uiTableFilter协同工作

1 个答案: