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

我的jquery tablesorter插件无论我做什么都拒绝工作。我尝试过降级我的jquery版本，但还是没有做。

我正在用来自外部json文件的数据从我的js文件构建表。

这是我的HTML外观。

<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>

这是我导入的脚本

<!-- 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>

还有我在其中构建表并调用tablesorter的js

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);
    }

我不相信我从jQuery构建表的事实就是为什么我遇到这个问题。我什至尝试只用html创建一个新表，但这没用。

这就是我用jquery调用tablesorter的方式

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

任何帮助将不胜感激。

谢谢

最佳答案

使用代码对jQuery tablesorter进行简单演示。我没看到任何问题。

$(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>

关于javascript - jQuery tablesorter在多次尝试后拒绝工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46311727/