Question

除了tablesorter的主题说明之外，我的代码都有效。我已将主题放在tablesorter 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样式时，您需要＆＃34; uitheme＆＃34;用于管理类名称的小部件（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']
    });
});

＆＃34; uitheme＆＃34;小部件包含在jquery.tablesorter.widgets.js文件中，需要包含在widgets选项中以及{icon}中的headerTemplate模式。

tablesorter主题不起作用

1 个答案: