javascript - Tablesorter、过滤器不适用于 Ajax 表加载

Question

我尝试在加载后使用触发器刷新/更新(不起作用)，还将表排序器文件从主页移动到加载的网址(不起作用)。最主要的是所有其他小部件都可以工作(滚动条、分页)并且过滤器的搜索框确实出现 - 但过滤不会发生。

表:

<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( ' ' ).load( '{% url "teams_table" %}' );
    });
});

Answer 1

tablesorter 需要在表加载到 DOM 后初始化。在这种情况下，我将在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
});