CODEWITHSUNDEEP
javascriptjqueryhtmltablesorter
mdnba50
mdnba50

Reputation: 379

jQuery tablesorter child elements th disable sorting

I have child elements in th that are popup windows. When i click .show_history div to display the popup div .show_history_ctn, sorting for that column is triggered. I have increased the z-index for .show_history to 9999 and still sorting is triggered. I've also added stopPropagation to .show_history click event and still sorting occurs.

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>

How do i solve? I need sorting on the column otherwise i'd just add sorter:'false'.

Upvotes: 1

Views: 323

Answers (1)

Mottie
Mottie

Reputation: 86403

The problem is that the click binding is removed by tablesorter since it rebuilds the table header. You can solve this using either of the following methods:

  • Set the headerTemplate option to an empty string ("") - this prevents altering the header content and therefore doesn't break any bindings. Internally, it is using an innerHTML (this will likely be changed soon) to wrap the content because jQuery's wrap was extremely slow in older versions of IE.

  • Bind the popup links inside the initialized callback (demo)

    $(function() {

  function bindLink() {
    $('.link').click(function(e) {
      e.preventDefault();
      e.stopPropagation();
    });
  }

  $('table').tablesorter({
    theme: 'blue',
    initialized: bindLink
  });

});

Update: Oops, I forgot to include the cssNoSort class name of "tablesorter-noSort" which needs to be added to the element you're clicking on. Demo link updated above.

<th>AlphaNumeric <a class="link tablesorter-noSort" href="https://google.com">test</a>

Upvotes: 1

Related Questions