Question

我在加载后尝试刷新/更新触发器（不起作用），还将tablesorter文件从主页面移动到加载的URL（不起作用）。主要的是所有其他小部件工作（滚动条，分页）和过滤器的搜索框确实出现 - 但过滤不会发生。

表：

<table id="teams_table" class="scroll-table" style="font-size:16px; height:280px">
            <thead>
            <tr>
                <th>Votes</th>
                <th>Odds</th>
                <th>Team </th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>200</td>
                <td>1.25</td>
                <td> Seahawks </td>
            </tr>
            <tr>
                <td>100</td>
                <td>1.15</td>
                <td> Broncos </td>
            </tr>
            <tr>
                <td>75</td>
                <td>1.10</td>
                <td>Patriots </td>
            </tr>
            <tr>
                <td>90</td>
                <td>1.65</td>
                <td> Raiders</td>
            </tr>
            <tr>
                <td>90</td>
                <td>1.65</td>
                <td> Packers </td>
            </tr>
        </tbody>
    </table>

脚本：

    $('.scroll-table').tablesorter({
        theme: 'blue',
        headerTemplate: '{content}',
        widgets: ['zebra', 'scroller', 'filter'],
        widgetOptions: {
            scroller_height: 290,
            filter_columnFilters : true,
            filter_liveSearch : true,
            filter_searchDelay : 100,
        }
    });

从主页面加载如此。

$( document ).ready( function() {
    $( '#view_teams' ).click( function() {
        $( '#main' ).html( '&nbsp;' ).load( '{% url "teams_table" %}' );
    });
});

Answer 1

在将表加载到DOM之后，需要初始化

tablesorter。在这种情况下，我会在load() callback function：

中对其进行初始化

$( function() {
    $( '#view_teams' ).click( function() {
        $( '#main' )
            // use empty() instead of replacing contents with a space
            // this really isn't even necessary
            .empty()
            .load( '{% url "teams_table" %}', function(){
                // load callback function
                $('.scroll-table').tablesorter({
                    theme: 'blue',
                    headerTemplate: '{content}',
                    widgets: ['zebra', 'scroller', 'filter'],
                    widgetOptions: {
                        scroller_height: 290,
                        filter_columnFilters : true,
                        filter_liveSearch : true,
                        filter_searchDelay : 100,
                    }
                });
            }); // end load
    }); // end click
});

Tablesorter，过滤器不使用Ajax表加载

1 个答案: