无论排序如何获取最后一个表行? [英] How to get the last table row no matter the sort?

问题描述

我将table-responsive类应用于table，并且正在使用下拉列表.因此，下拉菜单始终位于表格后面.正如我之前所听到的，这种情况没有解决办法. 因此，我试图从表中获取最后一行并添加dropup类，但是由于表是可排序的，因此每行的最后一行都可能会发生变化.

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.

我尝试应用此方法:

$("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.

示例: http://jsfiddle.net/bqg0cyyL/ (带有应用了dropup的最后一行)

只有最后一行才能获得dropup类(无论排序如何)?

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

推荐答案

最终答案(成功！)

最后感谢这个SO问题:

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

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");
  });
});

下面的内容已过时，但它显示了最终答案的历史记录

1. 使用JavaScript或JQuery识别何时进行排序(在表格列标题上单击).
2. 如果发生排序并且最后一行具有dropup类，则我们无需执行任何操作.

3. 否则，

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)从当前具有dropup类的行中删除.

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

b)将dropup CSS类添加到表中当前的最后一行.

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

jQuery代码:

$(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");
    }
  });
});

请注意，您的dropup类未在jsfiddle中指定，因此我只能假设您提供了什么.如果您有任何问题，请告诉我.

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.

编辑

上面的代码不起作用.这是因为bootstrap-sortable.js负责表的排序.这意味着，如果有一个类似于上面的单击事件处理程序，则将在完成后运行bootstrap-sortable.js.

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.

您有两个选择:

1. 就像在上面的代码段中所做的那样，通过在代码中添加新功能以添加dropup类来修改本地bootstrap-sortable.js.我会首先尝试在function doSort($this, $table){...}的末尾或您认为合适的其他地方调用它.

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.

您可能会认为不错，在bootstrap-sortable.js完成运行之后需要发生一些事情是可以理解的.也许在th中寻找类的更改，然后运行我上面编写的代码段.也许听某种事件来改变.在我的个人尝试中，我无法(不幸地)做这样的事情.我想到的最简单的方法是单击它们后在th上收听类的更改(在Web检查器中查看).但是 这篇文章 和 这篇文章 使我相信这种方法太麻烦了，或者根本不可能.

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.

因此，请试一试选项1，看看它的效果如何，否则值得在外部JS文件结束后询问有关如何实现事件侦听器的新问题.

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.

这篇关于无论排序如何获取最后一个表行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！