jQuery页面加载后，Tablesorter失效 [英] Tablesorter becomes non-functional after jquery page load
本文介绍了jQuery页面加载后，Tablesorter失效的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个页面，该页面的刷新率可变，并显示几个表格. tablesorter.js代码最初可以正常运行，但是在第一次刷新后无法正常工作.
I have a page that has a variable refresh rate, and displays a couple of tables. The tablesorter.js code works fine initially, but after the first refresh its non-functional.
我尝试将tablesorter函数放置在每个分支的click函数内，或者放置在整个click函数的末尾或load函数的内部
-和-
在查看了tablesorter的文档之后，我尝试在所有上述情况下调用$("#workstation-table").trigger("update", true).每次都是一样的.第一次刷新后不起作用.任何建议都很好.
I've tried placing the tablesorter function inside the click function for each branch, or at the end of the whole click function or inside the load function
-and-
After looking at the docs for tablesorter, I have tried calling $("#workstation-table").trigger("update", true) in all the forementioned scenarios. Everytime it's the same. Doesn't work after first refresh. Any advice would be great.
HAML代码(如有必要，底部显示HTML):
HAML code (HTML at bottom if necessary):
.whole-page
.container
%h1#application-title.hero-unit
.row-fluid
.span1
= image_tag "cog_logo.png"
= image_tag "crs.png"
Replication Server
.span1.pull-right#refresh-label
Refresh Rate:
.btn-group#refresh-buttons
%button.btn.btn-default#refresh-5-sec 5 sec
%button.btn.btn-default#refresh-30-sec 30 sec
%button.btn.btn-default#refresh-60-sec 60 sec
%h2
%small Status Dashboard
#status-tables
.col-md-4
%h3 Reports
#report-table-panel.panel
%a.accordion-toggle{ :data => { :toggle => "collapse", :target => "#collapse-cidne"} } CIDNE
#collapse-cidne.uncollapse.in
%table#report-table.table.table-striped.table-hover.table-bordered
%thead
%tr
%th#table-header Source
%th#table-header Type
%th#table-header Count
%tbody
- @reports.each do |report|
- if report[:source] == "CIDNE"
%tr
%td
= report[:source]
%td
= report[:type]
%td
= report[:count]
#report-table-panel.panel
%a.accordion-toggle{ :data => { :toggle => "collapse", :target => "#collapse-dcgs"} } DCGS
#collapse-dcgs.uncollapse.in
%table#report-table.table.table-striped.table-hover.table-bordered
%thead
%tr
%th#table-header Source
%th#table-header Type
%th#table-header Count
%tbody
- @reports.each do |report|
- if report[:source].blank?
- elsif report[:source] == "DCGS"
%tr
%td
= report[:source]
%td
= report[:type]
%td
= report[:count]
.col-md-5
%h3#workstation-title Workstations
.span-1
#sort-instructions (click column name to sort)
%table#workstation-table.table.table-striped.table-hover.table-bordered
%thead
%tr
%th#table-header Name
%th#table-header Downloaded
%th#table-header Available
%th#table-header Last Connect
%tbody
- @workstations.each do |workstation|
%tr
%td
= workstation[:name]
%td
= workstation[:downloaded]
%td
= workstation[:available]
%td
= workstation[:last_connect]
.col-md-3
%h3 Source
%table.table.table-striped.table-hover.table-bordered
%tr
%th#table-header Type
%th#table-header Name
%th#table-header Status
- @data_sources.each do |data_source|
%tr
%td
= data_source[:type]
%td
= data_source[:name]
%td
- if data_source[:status] == "UP"
#service-up
- else
#service-down
JS代码:
$(document).ready(function() {
var intervalId = window.setInterval(function(){
$('.container').load('/dashboard/index .container');
}, 60000);
$("#refresh-60-sec").addClass("pressed-button");
$("#application-title").on("click", "#refresh-buttons button", function(event) {
var interval = 0;
switch(event.target.id) {
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").trigger("update", true)
});
}, interval);
}
});
$("#workstation-table").tablesorter();
});
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org" />
<title>Webui</title>
<link data-turbolinks-track="true" href="/assets/application.css" media="all" rel=
"stylesheet" type="text/css" />
<script data-turbolinks-track="true" src="/assets/application.js" type=
"text/javascript">
</script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="D/VkaPDSNH5HHMazYu8dS8hcgGSIMl5rl5QS+eBnDyQ=" name="csrf-token" />
</head>
<body>
<div class='whole-page'>
<div class='container'>
<h1 class='hero-unit' id='application-title'></h1>
<div class='row-fluid'>
<h1 class='hero-unit' id='application-title'></h1>
<div class='span1'>
<h1 class='hero-unit' id='application-title'><img alt="Cog logo" src=
"/assets/cog_logo.png" /> <img alt="Crs" src="/assets/crs.png" /> Replication
Server</h1>
<div class='span1 pull-right' id='refresh-label'>
<h1 class='hero-unit' id='application-title'>Refresh Rate:</h1>
<div class='btn-group' id='refresh-buttons'>
<h1 class='hero-unit' id='application-title'><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></h1>
</div>
</div>
</div>
</div>
<h2><small>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>
<tr>
<td>CIDNE</td>
<td>et</td>
<td>5,070,127</td>
</tr>
<tr>
<td>CIDNE</td>
<td>laborum</td>
<td>8,674,267</td>
</tr>
<tr>
<td>CIDNE</td>
<td>sed</td>
<td>1,239,300</td>
</tr>
<tr>
<td>CIDNE</td>
<td>quos</td>
<td>826,247</td>
</tr>
<tr>
<td>CIDNE</td>
<td>dolorem</td>
<td>4,375,838</td>
</tr>
<tr>
<td>CIDNE</td>
<td>quos</td>
<td>8,932,341</td>
</tr>
<tr>
<td>CIDNE</td>
<td>ullam</td>
<td>2,504,480</td>
</tr>
<tr>
<td>CIDNE</td>
<td>et</td>
<td>4,178,823</td>
</tr>
<tr>
<td>CIDNE</td>
<td>vitae</td>
<td>3,945,054</td>
</tr>
<tr>
<td>CIDNE</td>
<td>vitae</td>
<td>1,158,563</td>
</tr>
<tr>
<td>CIDNE</td>
<td>ipsa</td>
<td>5,673,954</td>
</tr>
<tr>
<td>CIDNE</td>
<td>et</td>
<td>8,947,587</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>Voluptates</td>
<td>8,549,353</td>
</tr>
<tr>
<td>DCGS</td>
<td>Tempore</td>
<td>8,611,361</td>
</tr>
<tr>
<td>DCGS</td>
<td>Provident</td>
<td>1,461,613</td>
</tr>
<tr>
<td>DCGS</td>
<td>Velit</td>
<td>3,823,704</td>
</tr>
<tr>
<td>DCGS</td>
<td>Velit</td>
<td>2,079,617</td>
</tr>
<tr>
<td>DCGS</td>
<td>Tempore</td>
<td>2,004,062</td>
</tr>
<tr>
<td>DCGS</td>
<td>Velit</td>
<td>7,906,194</td>
</tr>
<tr>
<td>DCGS</td>
<td>Tempore</td>
<td>4,367,449</td>
</tr>
<tr>
<td>DCGS</td>
<td>Voluptates</td>
<td>4,405,687</td>
</tr>
<tr>
<td>DCGS</td>
<td>Voluptates</td>
<td>6,369,859</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>repellat</td>
<td>16,957</td>
<td>9,681,569</td>
<td>2013-08-25 01:59:43</td>
</tr>
<tr>
<td>qui</td>
<td>40,374</td>
<td>4,768,666</td>
<td>2013-07-06 02:45:04</td>
</tr>
<tr>
<td>consequatur</td>
<td>4,067</td>
<td>4,201,935</td>
<td>2013-07-26 21:42:00</td>
</tr>
<tr>
<td>sunt</td>
<td>11,049</td>
<td>5,605,974</td>
<td>2013-08-25 21:37:52</td>
</tr>
<tr>
<td>accusamus</td>
<td>1,870</td>
<td>6,209,493</td>
<td>2013-07-09 02:45:25</td>
</tr>
<tr>
<td>voluptate</td>
<td>40,900</td>
<td>9,647,011</td>
<td>2013-07-22 03:29:08</td>
</tr>
<tr>
<td>sint</td>
<td>33,815</td>
<td>6,141,657</td>
<td>2013-08-09 16:48:21</td>
</tr>
<tr>
<td>optio</td>
<td>22,849</td>
<td>6,901,660</td>
<td>2013-07-19 20:37:10</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>
<tr>
<td>CIDNE</td>
<td>http://gaylord.biz/kayla.mraz</td>
<td>
<div id='service-up'></div>
</td>
</tr>
<tr>
<td>DCGS</td>
<td>http://jenkins.org/ernest_gleichner</td>
<td>
<div id='service-down'></div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
推荐答案
输入:
$("#workstation-table").tablesorter();
在替换表的.load()调用的回调函数中.
inside the callback function of the .load() call that replaces the table.
这篇关于jQuery页面加载后，Tablesorter失效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
