0

我有一个初始页面（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();
        });

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

编辑：我应该补充说 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。

4

3 回答 3

1

这应该有效：

$('#resultsPane').load('program_finder_backend.asp', $('#filtersForm').serializeArray(), function() {
  sorttable.makeSortable($("#resultsPane").find("table")[0]);
}
于 2012-12-27T18:13:35.287 回答
0

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

$('#filtersForm').submit(function(e){
    e.preventDefault();
    $('#resultsPane').load('program_finder_backend.asp', $('#filtersForm').serializeArray(), function() {
         sorttable.makeSortable($(this).find("table").get(0));
    });
});​
于 2012-12-27T19:23:01.370 回答
0

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

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

如果您要向其中注入新表，则函数 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);
于 2014-08-14T11:05:00.200 回答