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

我尝试过在加载不起作用后使用触发器刷新/更新，同时将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>

像这样从主页加载

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

---

在将表加载到DOM中之后，需要初始化tablesorter。在本例中，我将在以下范围内对其进行初始化：

---

有没有更优雅的方式来解决这个问题？上面的加载方法是加载两个表和一些其他块，我希望它们保留在各自的模板中。如果替换整个表，那么我认为没有更优雅的解决方案。我不会替换表，没有表可以开始-因此表和初始化脚本都将一起加载。因此，在一个页面上为只包含在另一个模板的块组件中的表初始化几个表脚本，这甚至不一定会被呈现，这是一个非常可怕的设计。编辑：在回调中初始化也无法修复任何问题。因此，显然是scroller小部件造成的。实际上，此页面上的搜索也不起作用：

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

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