Why is this not loading properly?

StackOverflow https://stackoverflow.com/questions/21956692

  •  15-10-2022
  •  | 
  •  

سؤال

OK, so I've looked at the getting started examples on the documentation available at: http://mottie.github.io/tablesorter/docs/index.html#Demo

I am trying the to do the basic example provided in the documentation, however my table does not load with the tablesorter features (i.e. the sort icons on the header, or clickable header columns) as the online version demonstrates. What am I doing wrong?...

<!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>
هل كانت مفيدة؟

المحلول

It looks like the theme option is not being set. When you initialize tablesorter without any options:

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

The "default" theme is set, so make sure to include the "theme.default.css" file; but since it looks like you are loading the "blue" theme stylesheet, initialize the plugin as follows:

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

Now, from looking at the blue theme file name, it appears that it might be the original blue theme meant for tablesorter v2.0.5 ("/blue/style.css"). I would venture to guess that the tablesorter being used here is from my fork of tablesorter, so make sure to load the file named "theme.default.css".

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top