jQuery tablesorter在多次尝试后拒绝工作

Question

my jquery tablesorter plugin has just refused to work no matter what I do. I have tried downgrading my version of jquery amongst other things but still nothing.

I'm building the table from my js file with data from an external json file.

Here's what my HTML looks like.

<div class="table-responsive">
            <table id="myTable" class="tablesorter">
                <thead>
                    <tr>
                        <th>A</th>
                        <th>B</th>
                        <th>DATE & TIME</th>
                        <th>C</th>
                        <th>D</th>
                        <th><button>View </button></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>

Here are my imported scripts

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>        
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/respond/1.4.2/respond.min.js"></script>
<script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/selectivizr/1.0.3b/selectivizr.min.js"></script>
<script type="text/javascript" src="Vendors/js/jquery.tablesorter.js"></script> 
<script type="text/javascript" src="Vendors/js/jquery.tablesorter.min.js"></script> 
<script src="Resources/js/main.js"></script>

And my js where I build the table and call tablesorter

var tr;
    for (var i = 0; i < json.length - 30; i++) {
        tr = $('<tr/>');
        tr.append("<td>" + json[i].name + "</td>");
        tr.append("<td>" + json[i].summary + "</td>");
        tr.append("<td>" + formatDate(json[i].time) + "</td>");
        tr.append("<td " + "class= text-center>" + json[i].size + "</td>");
        tr.append("<td " + "class= text-center>" + json[i].id + ', ' + json[i].id + "</td>");
        $('tbody').append(tr);
    }

I don't believe the fact that I'm building the table from jQuery is why I'm having this problem. I even tried creating a new table with html only but that didn't work.

This is how I call the tablesorter with jquery

$("#myTable").tablesorter({
        sortList: [[2,0], [3,1]]
    }); 

Any help would be greatly appreciated.

THANK YOU

Answer 1

Simple demonstration of jQuery tablesorter using your code. I don't see any problems.

 $(function () { var tr; for (var i = 0; i < 10; i++) { tr = $('<tr/>'); tr.append("<td>" + i + "</td>"); tr.append("<td>" + i + "</td>"); tr.append("<td>" + i + "</td>"); tr.append("<td " + "class= text-center>" + i + "</td>"); tr.append("<td " + "class= text-center>" + i + ', ' + i + "</td>"); $('tbody').append(tr); } $("#myTable").tablesorter({ widgets: ['zebra'] }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.28.15/js/jquery.tablesorter.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.28.15/css/theme.blue.css" /> <div class="table-responsive"> <table id="myTable" cellspacing="1" class="tablesorter-blue"> <thead> <tr> <th>A</th> <th>B</th> <th>DATE & TIME</th> <th>C</th> <th>D</th> <th><button>View </button></th> </tr> </thead> <tbody> </tbody> </table> </div>