jQuery tablesorter子元素th禁用排序
问题描述:
我有弹出窗口th
中的子元素。当我点击.show_history
div显示弹出格.show_history_ctn
时,触发该列的排序。我已将.show_history
的Z-index增加到9999,并且仍然会触发排序。我还将stopPropagation添加到.show_history
点击事件,并且仍然发生排序。jQuery tablesorter子元素th禁用排序
jQuery的
$(".show_history").on("click",function(event) {
$(this).siblings(".show_history_ctn").find("tr").show();
event.stopPropagation();
if($(this).hasClass("active")) {
$(this).siblings(".show_history_ctn").slideUp();
$(this).removeClass("active");
} else {
$(".show_history_ctn").hide();
$(".show_history").removeClass("active");
$(this).siblings(".show_history_ctn").slideDown();
$(this).addClass("active");
}
});
$(".tablesorter").tablesorter();
HTML
<table class='tablesorter'><thead><tr><th><div class='show_history'>Show History</div><div class='show_history_ctn' style='display:none'>**content**</div></th><th></th></tr></thead></table>
我该怎么解决?我需要对列进行排序,否则我只需添加sorter:'false'
。
答
问题是,由于重新构建表头,点击绑定被tablesorter删除。你能解决这个使用下列方法之一:
- 将
headerTemplate
选项为空字符串(""
) - 这将阻止改变头内容,因此不会破坏任何绑定。在内部,它使用innerHTML
(这很可能会很快改变)来包装内容,因为jQuery的包装在旧版本的IE中速度非常慢。 -
绑定
initialized
回调(demo)$(function() { function bindLink() { $('.link').click(function(e) { e.preventDefault(); e.stopPropagation(); }); } $('table').tablesorter({ theme: 'blue', initialized: bindLink }); });
更新里面的弹出链接:哎呀,我忘了,包括需要被添加到元素你“的tablesorter-NOSORT”的cssNoSort
class name '点击。演示链接更新如上。
<th>AlphaNumeric <a class="link tablesorter-noSort" href="https://google.com">test</a>
我试了演示,点击弹出链接仍然被忽略,列被排序。 – mdnba50
糟糕,抱歉..我已经更新了我的答案。 – Mottie