Bootstrap-Table ajax 中的部分视图无法正常工作

Question

我正在开发一个带有 aspnet 核心和 bootstrap 的网络应用程序，我需要对托管在名为 'mytable.cshtml' 的局部视图中的简单 table 进行排序。局部视图必须在 Ajax 调用后动态加载。

我正在使用 bootstrap-table 插件按以下方式对 table 进行排序：

<table id="table" data-toggle="table" class="table">
        <thead>
            <tr>
                <th data-sortable="true">column 1</th>
                <th data-sortable="true">column 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>aaa</td>
                <td>111</td>
            </tr>
            <tr>
                <td>bbb</td>
                <td>222</td>
            </tr>
            <tr>
                <td>ccc</td>
                <td>333</td>
            </tr>
        </tbody>
    </table>

先测试没问题，这样加载局部视图

@Html.Partial("mytable");

视图已加载，table 格式正确，第 header 列有排序图标，单击 header 内容已排序。

现在我尝试在单击 link 时使用 Ajax 调用加载局部视图：

<a href=@Url.Action("GetMyTable"})  onclick="LoadMyTable()"/>
//LoadMyTable() script omitted ...

与正确加载部分视图之前一样，显示 table 并设置格式，但无法对列进行排序：未显示排序图标并且单击列 headers 没有任何反应

有人遇到过这种行为，可以建议我一些解决方法吗？作为替代方案，遇到过类似情况的任何人都可以建议我如何继续 - 最终使用不同的插件吗？

非常感谢您的任何提示

Answer 1

您可以使用 JavaScript。首先确保您已将 id="table" 添加到 table 标签，例如

<table id="table" class='table' data-toggle="table">

第二次在部分文件末尾添加 JS（也许这不严格）：

<script type="text/javascript">
     $('#table').bootstrapTable();
</script>

Bootstrap-Table ajax 中的部分视图无法正常工作

Bootstrap-Table in ajax partial view is not working

twitter-bootstrap

bootstrap-table