我有一个页面，其中包含我正在排序的三个表：一个 div 中的两个报告表 ID 为report-table（不排序）和一个 ID 为workstation-table（排序）。排序的初始化是相同的代码，所以我不确定发生了什么。
JS
$(document).ready(function() {
var intervalId = window.setInterval(function(){
$('#status-tables').load('/dashboard/index #status-tables', function(){
$("#workstation-table").tablesorter();
$("#report-table").tablesorter();
});
}, 5000);
var clicks = true
$("#application-name-label").animate({
"color": "black"
}, 1000);
$("#refresh-5-sec").addClass("pressed-button")
$("#refresh-button").on("click", function(event) {
var buttonGroup = $(this).next();
if(clicks) {
$(buttonGroup).fadeOut(
function() {
$(this).parent().css('padding-right', '235px');
$(this).parent().animate({
paddingRight: "15"
}, 300);
clicks = false;
});
} else {
$(buttonGroup).fadeIn();
clicks = true;
};
});
$("#refresh-buttons").on("click", "button", function(event) {
var interval = 0;
switch(event.target.id) {
case "refresh-off" :
interval = 50000000;
$(this).parent().children().removeClass("pressed-button");
$(this).addClass("pressed-button");
break;
case "refresh-5-sec" :
interval = 5000;
$(this).parent().children().removeClass("pressed-button");
$(this).addClass("pressed-button");
break;
case "refresh-30-sec" :
interval = 30000;
$(this).parent().children().removeClass("pressed-button");
$(this).addClass("pressed-button");
break;
case "refresh-60-sec" :
interval = 60000;
$(this).parent().children().removeClass("pressed-button");
$(this).addClass("pressed-button");
break;
}
if (interval != 0)
{
clearInterval(intervalId);
intervalId = setInterval(function(){
$('#status-tables').load('/dashboard/index #status-tables', function(){
$("#workstation-table").tablesorter();
$("report-table").tablesorter({sortList: [[0,1], [1,0]]});
});
}, interval);
}
});
$("#workstation-table").tablesorter();
$("#report-table").tablesorter();
});
HTML
<!DOCTYPE html>
<html>
<head>
<title>Webui</title>
<link data-turbolinks-track="true" href="/assets/application.css" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/application.js"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="YMkodi1Yy31wpZOA2dGdgbltM8M36Tiffo9PCMRlfsA=" name="csrf-token" />
</head>
<body>
<div class='whole-page'>
<div class='container'>
<h1 class='hero-unit' id='application-title'>
<div class='row-fluid'>
<div class='span1' id='replication-server'>
<img alt="Cog logo" src="/assets/cog_logo.png" />
<img alt="Crs" src="/assets/crs.png" />
Replication Server
<div class='span1 pull-right' id='refresh-label'>
<button class='btn' id='refresh-button'>Refresh Rate</button>
<div class='btn-group' id='refresh-buttons'>
<button class='btn btn-default' id='refresh-off'>Off</button>
<button class='btn btn-default' id='refresh-5-sec'>5 sec</button>
<button class='btn btn-default' id='refresh-30-sec'>30 sec</button>
<button class='btn btn-default' id='refresh-60-sec'>60 sec</button>
</div>
</div>
</div>
</div>
</h1>
<h2>
<small id='application-name-label'>Status Dashboard</small>
</h2>
<div id='status-tables'>
<div class='col-md-4'>
<h3>Reports</h3>
<div class='panel' id='report-table-panel'>
<a class='accordion-toggle' data-target='#collapse-cidne' data-toggle='collapse'>CIDNE</a>
</div>
<div class='uncollapse in' id='collapse-cidne'>
<table class='table table-striped table-hover table-bordered' id='report-table'>
<thead>
<tr>
<th id='table-header'>Source</th>
<th id='table-header'>Type</th>
<th id='table-header'>Count</th>
</tr>
</thead>
<tbody></tbody>
<tr>
<td>
CIDNE
</td>
<td>
quia
</td>
<td>
1,825,301
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
adipisci
</td>
<td>
6,187,231
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
dolore
</td>
<td>
4,051,833
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
assumenda
</td>
<td>
4,921,630
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
vero
</td>
<td>
7,047,737
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
adipisci
</td>
<td>
3,806,981
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
sit
</td>
<td>
1,580,987
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
quae
</td>
<td>
7,477,697
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
adipisci
</td>
<td>
6,313,774
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
quidem
</td>
<td>
219,960
</td>
</tr>
</table>
</div>
<div class='panel' id='report-table-panel'>
<a class='accordion-toggle' data-target='#collapse-dcgs' data-toggle='collapse'>DCGS</a>
</div>
<div class='uncollapse in' id='collapse-dcgs'>
<table class='table table-striped table-hover table-bordered' id='report-table'>
<thead>
<tr>
<th id='table-header'>Source</th>
<th id='table-header'>Type</th>
<th id='table-header'>Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>
DCGS
</td>
<td>
Dicta
</td>
<td>
3,816,119
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Reiciendis
</td>
<td>
1,946,655
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Dicta
</td>
<td>
4,278,956
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Reiciendis
</td>
<td>
7,676,013
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Id
</td>
<td>
1,230,434
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Id
</td>
<td>
5,415,422
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Reiciendis
</td>
<td>
2,622,098
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Dicta
</td>
<td>
6,462,915
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Reiciendis
</td>
<td>
8,797,296
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Dicta
</td>
<td>
9,564,459
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Dicta
</td>
<td>
8,010,943
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Id
</td>
<td>
524,049
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class='col-md-5'>
<h3 id='workstation-title'>Workstations</h3>
<div class='span-1'>
<div id='sort-instructions'>(click column name to sort)</div>
</div>
<table class='table table-striped table-hover table-bordered' id='workstation-table'>
<thead>
<tr>
<th id='table-header'>Name</th>
<th id='table-header'>Downloaded</th>
<th id='table-header'>Available</th>
<th id='table-header'>Last Connect</th>
</tr>
</thead>
<tbody>
<tr>
<td>
recusandae
</td>
<td>
27,035
</td>
<td>
2,634,369
</td>
<td>
2013-09-05 21:18:46
</td>
</tr>
<tr>
<td>
sed
</td>
<td>
49,685
</td>
<td>
1,364,771
</td>
<td>
2013-08-17 18:05:39
</td>
</tr>
<tr>
<td>
in
</td>
<td>
5,970
</td>
<td>
985,174
</td>
<td>
2013-07-16 09:57:24
</td>
</tr>
<tr>
<td>
nihil
</td>
<td>
17,907
</td>
<td>
8,029,822
</td>
<td>
2013-09-08 09:07:35
</td>
</tr>
<tr>
<td>
sed
</td>
<td>
42,146
</td>
<td>
9,447,817
</td>
<td>
2013-07-23 14:25:28
</td>
</tr>
<tr>
<td>
facere
</td>
<td>
53,008
</td>
<td>
4,056,927
</td>
<td>
2013-07-15 22:49:34
</td>
</tr>
<tr>
<td>
et
</td>
<td>
41,147
</td>
<td>
5,211,530
</td>
<td>
2013-07-18 03:52:58
</td>
</tr>
<tr>
<td>
autem
</td>
<td>
29,545
</td>
<td>
3,338,005
</td>
<td>
2013-09-11 06:55:50
</td>
</tr>
</tbody>
</table>
</div>
<div class='col-md-3'>
<h3>Source</h3>
<table class='table table-striped table-hover table-bordered'>
<tr>
<th id='table-header'>Type</th>
<th id='table-header'>Name</th>
<th id='table-header'>Status</th>
<tr>
<td>
CIDNE
</td>
<td>
http://abbottwaters.net/keshaun_smitham
</td>
<td>
<div id='service-up'></div>
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
http://jones.biz/ashlynn_schaden
</td>
<td>
<div id='service-down'></div>
</td>
</tr>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>