使 AJAX 调用返回的结果实时进行排序答案

【问题标题】：Making results returned by AJAX call live for sorting使 AJAX 调用返回的结果实时进行排序
【发布时间】：2012-12-27 17:50:28
【问题描述】：

我有一个初始页面 (program_finder.asp)，它为某些结果进行 AJAX 调用：

        $('#filtersForm').submit(function(){
      $('#resultsPane').load('program_finder_backend.asp',$('#filtersForm').serializeArray());
      return false;

这很好用。我提交参数，后端页面运行一些 SQL，然后转储到我的前端 resultsPane 区域就好了。返回的信息是一个表格。

我想要做的是使返回的信息表按列排序。我喜欢这个功能并想使用它：

http://www.kryogenix.org/code/browser/sorttable/

对于具有可排序类的表，用户可以单击列标题对内容进行排序。我认为这是用户友好的。它工作正常是一个静态页面。

我用这个加载

  script src="sorttable.js"></script

在初始文档的头部。

我很确定问题在于初始页面加载时 DOM 中不存在返回的表格内容，因此 sorttable.js 无法找到它们。我很确定我需要一个 .live() 或 .on() 或 .delegate() 某个地方来使返回的表结果对初始页面可见，但我不知道该怎么做。

我想我想要这样的东西：

 $('table.sortable').on('click', function(){
       // but here I don't know how to call sorttable();
        });

如果不清楚，我会添加更多信息。

编辑：我应该补充一点，排序文档是这样说的：

对页面加载后添加的表格进行排序

在运行时将新表添加到页面后（例如，通过执行 Ajax 请求以获取内容，或通过动态创建使用 JavaScript），获取对它的引用（可能使用 var newTableObject = document.getElementById(idOfTheTableIJustAdded) 或类似），然后这样做：

sorttable.makeSortable(newTableObject);

但这对我没有任何帮助。没看懂。

编辑#2：把它放在这里是为了更容易阅读。我试过了：

 $('#filtersForm').submit(function(){
     $('#resultsPane').load('program_finder_backend.asp', $('#filtersForm').serializeArray(), function() {
         sorttable.makeSortable($("#resultsPane").find("table")[0]);
      return false});
    });

每个 Dogbert 都没有运气。这会从初始页面直接转移到后端页面。

编辑#3

从引用的小提琴中添加 Adeneo 的代码：

 $('#filtersForm').submit(function(e){
e.preventDefault();
$('#resultsPane').load('program_finder_backend.asp', $('#filtersForm').serializeArray(), function() {
     sorttable.makeSortable($(this).find("table").get(0));
});
});

这似乎行得通。我永远不会想到这一点。还要感谢 Dogbert。

【问题讨论】：

如何对填充有ajax的表进行排序在documentation
是的。我读到：“一旦你在运行时向页面添加了一个新表（例如，通过执行 Ajax 请求来获取内容，或者通过使用 JavaScript 动态创建它），获取对它的引用（可能使用 var newTableObject = document.getElementById(idOfTheTableIJustAdded) 或类似），然后执行此操作： sorttable.makeSortable(newTableObject);"但这无济于事。我不明白。
这很简单！添加新表格或新内容后，将表格作为普通 DOM 元素获取，例如 $('#tableID').get() 并将其传递给 makeSortable() 函数。
这对我来说并不简单。对于等级初学者来说，缓慢的小词。我不知道该怎么做。感谢您的宝贵时间。
试试这个FIDDLE 看看是否可行。

标签： jquery sorttable.js

【解决方案1】：

这应该可行：

$('#resultsPane').load('program_finder_backend.asp', $('#filtersForm').serializeArray(), function() {
  sorttable.makeSortable($("#resultsPane").find("table")[0]);
}

【讨论】：

放入 $('#filtersForm').submit(function(){ $('#resultsPane').load('program_finder_backend.asp', $('#filtersForm').serializeArray( ), function() { sorttable.makeSortable($("#resultsPane").find("table")[0])}); });我必须添加一个 } 和 a ) 才不会出错，这会使初始页面转移到后端页面。该表是可排序的，但直接传输后端页面是行不通的。

【解决方案2】：

您必须阻止提交表单、加载表格、然后将表格作为普通 DOM 元素并将其传递给 makeSortable() 函数的默认操作，如下所示：

$('#filtersForm').submit(function(e){
    e.preventDefault();
    $('#resultsPane').load('program_finder_backend.asp', $('#filtersForm').serializeArray(), function() {
         sorttable.makeSortable($(this).find("table").get(0));
    });
});

【讨论】：

【解决方案3】：

我想我会在这里发布这个，因为它可能会帮助别人。

在您更改表格的内容（可能通过 AJAX 返回）之前，Sorttable 工作得很好，然后它不知道这个新内容并且不再正确排序。

函数 makeSortable(table) 可以正常工作，如果您将一个新表注入其中，因为 sorttable 现在将遍历该表并使其可排序。但是，如果您有一个已经通过 makeSortable(table) 放置的现有表格 - 可能在页面加载时 - 此表格标题单元格可能已经附加了一个 sorttable 事件处理程序，如果您只是调用 pass the table 只会让您感到悲伤再次进入 makeSortable。

这让我今天对一个包含 AJAX 可更改内容的表有点麻烦，我发现 sorttable 在 AJAX 响应之后确实需要一个“重新加载”功能。所以这里是

reload: function (table) {
  // get the head row and iterate each header cell
    headrow = table.tHead.rows[0].cells;
    for (var i=0; i<headrow.length; i++) {
        // use the provided removeEvent function to get rid of the current handler
        removeEvent(headrow[i], 'click', sorttable.innerSortFunction);

        // check if there is a currently sorted col and remove class
        if (headrow[i].className.search(/\bsorttable_sorted\b/) != -1) {
            headrow[i].className = headrow[i].className.replace('sorttable_sorted','');
        }
        if (headrow[i].className.search(/\bsorttable_sorted_reverse\b/) != -1) {
            headrow[i].className = headrow[i].className.replace('sorttable_sorted_reverse','');
        }
    }
    // remove any sort indicating arrows
    sortfwdind = document.getElementById('sorttable_sortfwdind');
    if (sortfwdind) { sortfwdind.parentNode.removeChild(sortfwdind); }
    sortrevind = document.getElementById('sorttable_sortrevind');
    if (sortrevind) { sortrevind.parentNode.removeChild(sortrevind); }
    // now we can make the table sortable with it's new content
    sorttable.makeSortable(table);
}

只需将该函数放在 sorttable.js 中的 Shaker_sort 函数下（不要忘记在 Shaker_sort 的最后一个大括号后面加一个逗号）。现在，如果您更改之前排序表的内容，请将其传递给 reload 以使其再次可排序：

sorttable.reload(document.getElementById('#MyTableID'));

重要

要使上述重载函数起作用，您必须断开 sorttable.innerSortFunction 函数，使其可全局访问，否则删除事件处理程序将不起作用。为此，只需剪切并粘贴 innerSortFunction，使其成为 sorttable 上的函数，就像 reload 和 sort_shaker 一样。剪切和粘贴 innerSortFunction 函数后，确保它仍然作为事件处理程序附加到标题，如下所示：

dean_addEvent(headrow[i],"click", sorttable.innerSortFunction);

【讨论】：