How to get the last table row no matter the sort?

Question

I have a table-responsive class applied to a table and I am using a dropdown. Because of that, the dropdown always go behind the table. As I heard before, there is no solution to this situation. So I am trying to get the last row from the table and add the dropup class, but as the table is sortable the last row could change in every sort.

I tried to apply this:

$("table#MyTable>tbody>tr:last>td>div").addClass("dropup");

...Worked, but as the user sort the table, the last row could not be the last row anymore.

Example: http://jsfiddle.net/bqg0cyyL/ (with the last row with dropup applied)

How can only the last row gets the dropup class (no matter the sort)?

Answer 1

Final Answer (success!)

Finally thanks to this SO question: How to run a function after an external JS script finishes running I have arrived to the solution below:

JSFiddle

$(document).ready(function() {
  $("#MyTable").on('sorted', function(){
    var lastRow = $("#MyTable").find("tbody tr:last");
      // Removing dropup class from the row which owned it
      $("#MyTable").find("tbody tr.dropup").removeClass("dropup");
      // Adding dropup class to the current last row
      lastRow.addClass("dropup");
  });
});

Below is now obsolete, but it shows the history of the final answer

1. Use JavaScript or JQuery to identify when a sort occurs (click ocurring on the table column title).
2. If a sort occurred and the last row has the dropup class, then we don't need to do anything.

3. Otherwise,

   a) Remove the dropup class from the row which currently has it.

   b) Add the dropup CSS class to the row which is currently the last on the table.

jQuery code:

$(document).ready(function() {
  $("th").click(function() {
    var lastRow = $(this).closest("table").find("tbody tr:last");
    if(!lastRow.hasClass("dropup")){
        // Removing dropup class from the row which owned it
        $(this).closest("table").find("tbody tr.dropup").removeClass("dropup");
        // Adding dropup class to the current last row
        lastRow.addClass("dropup");
    }
  });
});

Note that your dropup class is not specified in your jsfiddle, so I can only assume what you have provided. Let me know if you have any questions.

EDIT

The above code will not work. That is because bootstrap-sortable.js is in charge of the sorting of the table. Meaning, if a click event handler like the one above is in place, bootstrap-sortable.js will run after this is complete.

You have two options:

1. Modify your local bootstrap-sortable.js by adding a new function in the code to add the dropup class, like I did in my snippet above. I would first try to do call it at the end of the function doSort($this, $table){...} or wherever else you see appropriate.

2. You could think ok, it is understandable that something needs to happen after bootstrap-sortable.js finishes running. Perhaps looking for the change of class in the th then running the snippet I wrote above. Perhaps listening to some kind of event to change. In my personal attempts I have not been able to do such a thing (sadly). The easiest thing I thought of doing was listening to the change of class on the th after you click them (see for yourself on your web inspector). However this article, and this article lead me to believe this approach is either too cumbersome or simply not possible.

So give option 1 a try and see how it goes for you, otherwise it would be worth while to ask a new question with regards to how to implement an event listener after an external JS file has ended.

Answer 2

As your primary problem is that the dropdown going behind the table. To solve that use the below jQuery code.

$('.table-responsive').on('show.bs.dropdown', function () {
     $('.table-responsive').css( "overflow", "inherit" );
});

$('.table-responsive').on('hide.bs.dropdown', function () {
     $('.table-responsive').css( "overflow", "auto" );
})

http://jsfiddle.net/bqg0cyyL/2/

Bootstrap button drop-down inside responsive table not visible because of scroll