Question

好的，所以我查看了可用文档的入门示例：http://mottie.github.io/tablesorter/docs/index.html#Demo

我正在尝试执行文档中提供的基本示例，但是我的表没有加载tablesorter功能（即标题上的排序图标，或可点击的标题列），如在线版本所示。我做错了什么？...

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Something</title>
        <!-- load tableSorter theme -->
        <link href="http://mottie.github.io/tablesorter/css/theme.default.css" rel="stylesheet">
        <!-- load jQuery and tableSorter scripts -->
        <script type="text/javascript" src="./includes//jquery-2.1.0.js"></script>
        <script type="text/javascript" src="./includes/tablesorter-master/js/jquery.tablesorter.js"></script>
        <!-- load tableSorter widgets -->
        <script type="text/javascript" src="./includes/tablesorter-master/js/jquery.tablesorter.widgets.js"></script>
        <script type="text/javascropt">
        $(document).ready(function(){
            $("table").tablesorter({
                theme : 'blue',
                widgets : ['zebra','columns'],
                sortList: [[0,0]],
                debug : true,
                widthFixed: false,
                showProcessing : true
            });
        });
        </script>
</head>
    <body>
        <table class="tablesorter">
            <thead>
                <tr>
                    <th>Last Name</th>
                    <th>First Name</th>
                    <th>Email</th>
                    <th>Due</th>
                    <th>Web Site</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Smith</td>
                    <td>John</td>
                    <td>jsmith@gmail.com</td>
                    <td>$50.00</td>
                    <td>http://www.jsmith.com</td>
                </tr>
                <tr>
                    <td>Bach</td>
                    <td>Frank</td>
                    <td>fbach@yahoo.com</td>
                    <td>$50.00</td>
                    <td>http://www.frank.com</td>
                </tr>
                <tr>
                    <td>Doe</td>
                    <td>Jason</td>
                    <td>jdoe@hotmail.com</td>
                    <td>$100.00</td>
                    <td>http://www.jdoe.com</td>
                </tr>
                <tr>
                    <td>Conway</td>
                    <td>Tim</td>
                    <td>tconway@earthlink.net</td>
                    <td>$50.00</td>
                    <td>http://www.timconway.com</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Answer 1

看起来没有设置主题选项。在没有任何选项的情况下初始化tablesorter时：

$("#myTable").tablesorter();

设置了“默认”主题，因此请务必包含“theme.default.css”文件;但由于看起来您正在加载“蓝色”主题样式表，请按如下方式初始化插件：

<script type="text/javascropt">
$(function(){
    $("#myTable").tablesorter({
        theme: "blue"
    });
});
</script>

现在，通过查看蓝色主题文件名，看起来它可能是适用于tablesorter v2.0.5（“/ blue / style.css”）的原始蓝色主题。我冒昧地猜测这里使用的tablesorter来自我的fork of tablesorter，因此请务必加载名为"theme.default.css"的文件。

为什么加载不正确？

1 个答案: