Question

我需要创建一个使用延迟加载而不是分页的表来动态显示超出初始加载的内容和可以通过jQuery UI的可排序功能进行排序。

通过检查scrollTop和scrollHeight来确定延迟加载，以确定用户所在页面底部的接近程度。当它们足够接近时，我进行AJAX调用以获取另一组数据，我将这些数据作为表行附加到表的末尾。

我在TABLE上实现了jQuery UI可排序，但问题是它不允许我将TR拖过原始TABLE中的最后一个TR。它记得哪个TR是最后一个孩子，然后阻止我超越它。

下次我尝试拖动TR时，它知道新结束的位置，但是当我加载更多内容时遇到了同样的问题。

我想要发生的是当用户拖动TR时，TABLE可以延迟加载一些新数据，用户可以继续拖动到新的数据集，因为它们似乎很不方便继续下降，以便能够再次开始拖动。

我有一种感觉，这需要对可排序函数中的代码进行根本性的更改，但我希望有人可能已经找到了解决此问题的方法。

更新：我尝试使用connectWith选项。而不是将动态加载的行添加到相同的TBODY中，而是将它们放入它们自己的TBODY中，该TBODY也是可排序的，并使用connectWith选项（所有TBODY元素的相同类）设置新的和原始的TBODY。不幸的是，这没有任何不同。我仍然可以在删除TR之后拖过整个TABLE ，但在原始拖动上下文中仍然不能。这令人沮丧，因为它不是一个很好的用户体验。

Answer 1

我在一周之前写过 - 我自己的jQuery Table分类器：（asc / desc）

function sortTableJquery()
 {
    var tbl =$("#tbl tr");
    var store = [];
    var sortElementIndex = parseFloat($.data(document.body, "sortElement"));

    for (var i = 0, len = $(tbl).length; i < len; i++)
    {
        var rowDom = $(tbl).eq(i);
        var rowData = $.trim($("td",$(rowDom)).eq(sortElementIndex).text());
          store.push([rowData, rowDom]);
    }
    store.sort(function (x, y)
    {
        if (x[0].toLowerCase() == y[0].toLowerCase()) return 0;
        if (x[0].toLowerCase() < y[0].toLowerCase()) return -1 * parseFloat($.data(document.body, "sortDir"));
        else return 1 * parseFloat($.data(document.body, "sortDir"));

    });
    for (var i = 0, len = store.length; i < len; i++)
    {
        $("#tbl").append(store[i][1]);
    }
    store = null;
 }

Answer 2

在您加载新项目后，您是否尝试在可排序时调用refresh？

$('#your-sortable').sortable('refresh');

jsfiddle在这里真的有帮助=）

如何在延迟加载的表上使用jQuery UI可排序功能？

2 个答案: