У меня есть большая таблица (24 столбца), в которой используется плагин TableSorter, чтобы сэкономить место, я использую вертикальные изображения для отображения заголовков в заголовке.
У меня есть событие click, прикрепленное к нескольким выбранным изображениям, это откроет вторую таблицу (через диалоговое окно jQuery) рядом с заголовком заголовка, который был нажат. У меня проблема в том, что, когда я нажимаю на изображение, сортировщик таблиц также сортирует столбец (что я не хочу, чтобы происходило), поэтому я пытался найти способ каким-то образом отключить сортировку, но только когда Я нажимаю на заголовок изображения.
Любая помощь будет принята с благодарностью!
HTML код:
<table class="tablesorter" id="sales">
<thead>
<tr>
<th class="sales header" id="th_1"><img alt="" src="name.png" id="Name" onclick="openHeaderGeneric(this)"></th>
<th class="sales header" id="th_2"><img alt="" src="date.png" id="Date" onclick="openHeaderGeneric(this)"></th>
</tr>
</thead>
</table>
Вот JS:
function openHeaderGeneric(element)
{
// event triggered by clicking on img (title) not header (th)
var thId = $('#' + element.id).parent().attr('id');
var imageId = element.id;
var offset = $("th#" + thId).offset();
var top = offset.top;
var left = offset.left;
// get width of td cell (+8 for padding)
var tdWidth = thId.split('_');
tdWidth = tdWidth[1];
var width = $("td.col_" + tdWidth).width();
left = left + width + 8;
$.fx.speeds._default = 1000;
$("#" + imageId + "_wrapper").dialog(
{
autoOpen : false,
show : "slide",
hide : "slide",
width : "auto",
resizable : false,
modal : false,
position : [ left, top ]
});
if (!$("#" + imageId + "_wrapper").dialog("isOpen"))
{
$("#" + imageId + "_wrapper").dialog("open");
}
else if ($("#" + imageId + "_wrapper").dialog("isOpen"))
{
$("#" + imageId + "_wrapper").dialog("close");
}
}