jquery tablesorter 加 javascript / jquery 偏移量冲突
jquery tablesorter plus javascript / jquery offset conflict
我似乎与 jquery tablesorter 插件以及 javascript scrollTo 和一些 jQuery 更高级的等效插件发生冲突。在每种情况下,在我动态添加内容后,"scroll to location" 似乎都没有考虑动态添加内容所占用的 space。我尝试了几种不同的方法,但结果相同。以下代码可直接复制测试
<link href="http://tablesorter.com/themes/blue/style.css" rel="stylesheet">
<script type="text/javascript" src="http://tablesorter.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://tablesorter.com/__jquery.tablesorter.js"></script>
<script>
$( document ).ready(function() {
var tableCode =
"<tr>" +
"<th>" + 'Seq' + "</th>" +
"<th>" + 'Column 1' + "</th>" +
"<th>" + 'Column 2' + "</th>" +
"<th>" + 'Column 3' + "</th>" +
"<th>" + 'Column 4' + "</th>" +
"<th>" + 'Column 5' + "</th>" +
"<th>" + 'Column 6' + "</th>" +
"<th>" + 'Column 7' + "</th>" +
"<th>" + 'Column 8' + "</th>" +
"</tr>";
var tableDetail =
"<tr>" +
"<td>" + "some text " + "</td>" +
"<td>" + "some text " + "</td>" +
"<td>" + "some text " + "</td>" +
"<td>" + "some text " + "</td>" +
"<td>" + "some text " + "</td>" +
"<td>" + "some text " + "</td>" +
"<td>" + "some text " + "</td>" +
"<td>" + "some text " + "</td>" +
"<td>" + "some text " + "</td>" +
"</tr>";
// append headers
$('table thead').append(tableCode);
// apply tablesort magic
$("table").tablesorter();
// apply tablesort logic to first line of table
$('table').trigger("update");
// Listeners
$('#mybutton').click(function() {
// append each new line
$('table tbody').append(tableDetail);
$('#spacer').append("<br/>");
// apply tablesort magic to each line
$('table').trigger("update");
});
$("a").click(function() {
scrollToAnchor(this.name);
});
function scrollToAnchor(location){
var aTag = $("a[name='"+ location +"']");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
console.log(aTag);
console.log(aTag.offset().top);
}
}); // end document ready
</script>
<a ref='#home'></a>
<!-- <p>This cute jQuery add-in, called <a href='http://tablesorter.com/docs/index.html' target='_blank'>tablesort.js</a> permits formated tables with sortable columns.</p> -->
<button id='mybutton'>Click me to add rows to tables</button>
<br/><br/>
<a href="#" name='tag1'>Goto Tag 1</a><br/>
<a href="#" name='tag2'>Goto Tag 2</a><br/><br/>
<div id='spacer'></div>
<a ref='#tag1'></a>TAG 1
<a href="#" name='home'>Go to top</a><br/>
<table style='display: table;' class='analysisTable tablesorter' cellspacing='1'>
<thead>
</thead>
<tbody>
</tbody>
</table>
<a ref='#tag2'></a>TAG 2
<a href="#" name='home'>Go to top</a><br/>
<table style='display: table;' class='analysisTable tablesorter' cellspacing='1'>
<thead>
</thead>
<tbody>
</tbody>
</table>
首先,需要更改锚点。我更喜欢使用 id
而不是 name
; ref
也不是有效属性 (demo)
<a id="home"></a>
...
<a href="#tag1">Goto Tag 1</a>
<br/>
<a href="#tag2">Goto Tag 2</a>
...
<a id="tag1"></a>TAG 1
<a href="#home">Go to top</a>
...
<a id="tag2"></a>TAG 2
<a href="#home">Go to top</a>
然后修改代码如下:
$("a").click(function () {
scrollToAnchor(this.hash);
// prevent jump to anchor
return false;
});
function scrollToAnchor(location) {
var aTag = $(location);
$('html,body').animate({
scrollTop: aTag.offset().top
}, 'slow');
}
最后,tablesorter初始化后不需要立即更新:
// append headers
$('table thead').append(tableCode);
// apply tablesort magic
$("table").tablesorter();
// apply tablesort logic to first line of table
// $('table').trigger("update"); <--- ***** REMOVE THIS *****
所有极好的建议...这是修改后的代码,工作 100%!
对 tablesorter 文档、修复和增强方面的一些出色工作大声疾呼。 http://wowmotty.blogspot.ca/2011/06/jquery-tablesorter-missing-docs.html
<script src="js/jquery.js"></script>
<link href="http://tablesorter.com/themes/blue/style.css" rel="stylesheet">
<script type="text/javascript" src="http://tablesorter.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://tablesorter.com/__jquery.tablesorter.js"></script>
<script>
$( document ).ready(function() {
var tableCode =
"<tr>" +
"<th>" + 'Seq' + "</th>" +
"<th>" + 'Column 1' + "</th>" +
"<th>" + 'Column 2' + "</th>" +
"<th>" + 'Column 3' + "</th>" +
"<th>" + 'Column 4' + "</th>" +
"<th>" + 'Column 5' + "</th>" +
"<th>" + 'Column 6' + "</th>" +
"<th>" + 'Column 7' + "</th>" +
"<th>" + 'Column 8' + "</th>" +
"</tr>";
var tableDetail =
"<tr>" +
"<td>" + "some text " + "</td>" +
"<td>" + "some text " + "</td>" +
"<td>" + "some text " + "</td>" +
"<td>" + "some text " + "</td>" +
"<td>" + "some text " + "</td>" +
"<td>" + "some text " + "</td>" +
"<td>" + "some text " + "</td>" +
"<td>" + "some text " + "</td>" +
"<td>" + "some text " + "</td>" +
"</tr>";
// append headers
$('table thead').append(tableCode);
// apply tablesort magic
$("table").tablesorter();
// apply tablesort logic to first line of table
// $('table').trigger("update");
// Listeners
$('#mybutton').click(function() {
// append each new line
$('table tbody').append(tableDetail);
$('#spacer').append("<br/>");
// apply tablesort magic to each line
$('table').trigger("update");
});
$("a").click(function() {
scrollToAnchor(this.hash);
return false;
});
function scrollToAnchor(location){
var aTag = $(location);
console.log(aTag.offset().top);
console.log(location);
$('html,body').animate({
scrollTop: aTag.offset().top
}, 'slow');
}
}); // end document ready
</script>
<a id='home'></a>
<button id='mybutton'>Click me to add rows to tables</button>
<br/><br/>
<a href="#tag1">Goto Tag 1</a><br/>
<a href="#tag2">Goto Tag 2</a><br/><br/>
<div id='spacer'></div>
<a id='tag1'/>TAG 1
<a href="#home">Go to top</a><br/>
<table style='display: table;' class='analysisTable tablesorter' cellspacing='1'>
<thead>
</thead>
<tbody>
</tbody>
</table>
<a id='tag2'/>TAG 2
<a href="#home" >Go to top</a><br/>
<table style='display: table;' class='analysisTable tablesorter' cellspacing='1'>
<thead>
</thead>
<tbody>
</tbody>
</table>
我似乎与 jquery tablesorter 插件以及 javascript scrollTo 和一些 jQuery 更高级的等效插件发生冲突。在每种情况下,在我动态添加内容后,"scroll to location" 似乎都没有考虑动态添加内容所占用的 space。我尝试了几种不同的方法,但结果相同。以下代码可直接复制测试
<link href="http://tablesorter.com/themes/blue/style.css" rel="stylesheet">
<script type="text/javascript" src="http://tablesorter.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://tablesorter.com/__jquery.tablesorter.js"></script>
<script>
$( document ).ready(function() {
var tableCode =
"<tr>" +
"<th>" + 'Seq' + "</th>" +
"<th>" + 'Column 1' + "</th>" +
"<th>" + 'Column 2' + "</th>" +
"<th>" + 'Column 3' + "</th>" +
"<th>" + 'Column 4' + "</th>" +
"<th>" + 'Column 5' + "</th>" +
"<th>" + 'Column 6' + "</th>" +
"<th>" + 'Column 7' + "</th>" +
"<th>" + 'Column 8' + "</th>" +
"</tr>";
var tableDetail =
"<tr>" +
"<td>" + "some text " + "</td>" +
"<td>" + "some text " + "</td>" +
"<td>" + "some text " + "</td>" +
"<td>" + "some text " + "</td>" +
"<td>" + "some text " + "</td>" +
"<td>" + "some text " + "</td>" +
"<td>" + "some text " + "</td>" +
"<td>" + "some text " + "</td>" +
"<td>" + "some text " + "</td>" +
"</tr>";
// append headers
$('table thead').append(tableCode);
// apply tablesort magic
$("table").tablesorter();
// apply tablesort logic to first line of table
$('table').trigger("update");
// Listeners
$('#mybutton').click(function() {
// append each new line
$('table tbody').append(tableDetail);
$('#spacer').append("<br/>");
// apply tablesort magic to each line
$('table').trigger("update");
});
$("a").click(function() {
scrollToAnchor(this.name);
});
function scrollToAnchor(location){
var aTag = $("a[name='"+ location +"']");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
console.log(aTag);
console.log(aTag.offset().top);
}
}); // end document ready
</script>
<a ref='#home'></a>
<!-- <p>This cute jQuery add-in, called <a href='http://tablesorter.com/docs/index.html' target='_blank'>tablesort.js</a> permits formated tables with sortable columns.</p> -->
<button id='mybutton'>Click me to add rows to tables</button>
<br/><br/>
<a href="#" name='tag1'>Goto Tag 1</a><br/>
<a href="#" name='tag2'>Goto Tag 2</a><br/><br/>
<div id='spacer'></div>
<a ref='#tag1'></a>TAG 1
<a href="#" name='home'>Go to top</a><br/>
<table style='display: table;' class='analysisTable tablesorter' cellspacing='1'>
<thead>
</thead>
<tbody>
</tbody>
</table>
<a ref='#tag2'></a>TAG 2
<a href="#" name='home'>Go to top</a><br/>
<table style='display: table;' class='analysisTable tablesorter' cellspacing='1'>
<thead>
</thead>
<tbody>
</tbody>
</table>
首先,需要更改锚点。我更喜欢使用 id
而不是 name
; ref
也不是有效属性 (demo)
<a id="home"></a>
...
<a href="#tag1">Goto Tag 1</a>
<br/>
<a href="#tag2">Goto Tag 2</a>
...
<a id="tag1"></a>TAG 1
<a href="#home">Go to top</a>
...
<a id="tag2"></a>TAG 2
<a href="#home">Go to top</a>
然后修改代码如下:
$("a").click(function () {
scrollToAnchor(this.hash);
// prevent jump to anchor
return false;
});
function scrollToAnchor(location) {
var aTag = $(location);
$('html,body').animate({
scrollTop: aTag.offset().top
}, 'slow');
}
最后,tablesorter初始化后不需要立即更新:
// append headers
$('table thead').append(tableCode);
// apply tablesort magic
$("table").tablesorter();
// apply tablesort logic to first line of table
// $('table').trigger("update"); <--- ***** REMOVE THIS *****
所有极好的建议...这是修改后的代码,工作 100%! 对 tablesorter 文档、修复和增强方面的一些出色工作大声疾呼。 http://wowmotty.blogspot.ca/2011/06/jquery-tablesorter-missing-docs.html
<script src="js/jquery.js"></script>
<link href="http://tablesorter.com/themes/blue/style.css" rel="stylesheet">
<script type="text/javascript" src="http://tablesorter.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://tablesorter.com/__jquery.tablesorter.js"></script>
<script>
$( document ).ready(function() {
var tableCode =
"<tr>" +
"<th>" + 'Seq' + "</th>" +
"<th>" + 'Column 1' + "</th>" +
"<th>" + 'Column 2' + "</th>" +
"<th>" + 'Column 3' + "</th>" +
"<th>" + 'Column 4' + "</th>" +
"<th>" + 'Column 5' + "</th>" +
"<th>" + 'Column 6' + "</th>" +
"<th>" + 'Column 7' + "</th>" +
"<th>" + 'Column 8' + "</th>" +
"</tr>";
var tableDetail =
"<tr>" +
"<td>" + "some text " + "</td>" +
"<td>" + "some text " + "</td>" +
"<td>" + "some text " + "</td>" +
"<td>" + "some text " + "</td>" +
"<td>" + "some text " + "</td>" +
"<td>" + "some text " + "</td>" +
"<td>" + "some text " + "</td>" +
"<td>" + "some text " + "</td>" +
"<td>" + "some text " + "</td>" +
"</tr>";
// append headers
$('table thead').append(tableCode);
// apply tablesort magic
$("table").tablesorter();
// apply tablesort logic to first line of table
// $('table').trigger("update");
// Listeners
$('#mybutton').click(function() {
// append each new line
$('table tbody').append(tableDetail);
$('#spacer').append("<br/>");
// apply tablesort magic to each line
$('table').trigger("update");
});
$("a").click(function() {
scrollToAnchor(this.hash);
return false;
});
function scrollToAnchor(location){
var aTag = $(location);
console.log(aTag.offset().top);
console.log(location);
$('html,body').animate({
scrollTop: aTag.offset().top
}, 'slow');
}
}); // end document ready
</script>
<a id='home'></a>
<button id='mybutton'>Click me to add rows to tables</button>
<br/><br/>
<a href="#tag1">Goto Tag 1</a><br/>
<a href="#tag2">Goto Tag 2</a><br/><br/>
<div id='spacer'></div>
<a id='tag1'/>TAG 1
<a href="#home">Go to top</a><br/>
<table style='display: table;' class='analysisTable tablesorter' cellspacing='1'>
<thead>
</thead>
<tbody>
</tbody>
</table>
<a id='tag2'/>TAG 2
<a href="#home" >Go to top</a><br/>
<table style='display: table;' class='analysisTable tablesorter' cellspacing='1'>
<thead>
</thead>
<tbody>
</tbody>
</table>