表排序器主题不起作用

Question

我的代码除了表排序器的主题说明外，所有代码都有效。我已经将主题放在表排序器 js 内的 CSS 文件夹中。如果你能帮助我，我感谢你的帮助。这是我的代码：

<table id="dtTable" class="table table-bordered table-responsive">
    <thead>
        <tr>
            <th align="center">#</th>
            <th>Desc</th>
            <th colspan="2" align="center">Action</th>
        </tr>
    </thead>
    <tbody>
        <?php $query="SELECT * FROM eth" ; $records_per_page=10; $newquery=$ eth->paging($query,$records_per_page); $eth->dataview($newquery); ?>
        <tbody class "do-not-sort tablesorter-no-sort">
            <tr>
                <td colspan="7" align="center">
                    <div class="pagination-wrap">
                        <?php $eth->paginglink($query,$records_per_page); ?></div>
                </td>
            </tr>
        </tbody>
    </tbody>
</table>
<script type="text/javascript">
    $(function() {
        $("#dtTable").tablesorter()
        selectorSort: "th, td"
        selectorRemove: "tr.do-not-sort"
        theme: "jui"
    });
</script>

谢谢

Answer 1

使用 Bootstrap 或 jQuery UI 样式时，您需要 "uitheme" 小部件来管理类名（demo）。

页眉

<!-- ui theme stylesheet - contents shown below -->
<link rel="stylesheet" href="../css/theme.jui.css">
<!-- jQuery UI theme (cupertino example here) -->
<link rel="stylesheet" href="css/jquery-ui.min.css">
<!-- tablesorter plugin -->
<script src="../js/jquery.tablesorter.js"></script>
<!-- tablesorter widget file - loaded after the plugin -->
<script src="../js/jquery.tablesorter.widgets.js"></script>

脚本

$(function () {
    $('table').tablesorter({
        theme: 'jui',
        headerTemplate: '{content}{icon}',
        widgets: ['zebra', 'uitheme']
    });
});

"uitheme"小部件包含在jquery.tablesorter.widgets.js文件中，需要与headerTemplate中的{icon}模式一起包含在widgets选项中。