Question

我有Javascript，它从Web API中提取行，这些行提供页面中的数据。

在部分伪代码中，这是：

for each page
    ajax (url+pageid, function (result)
    {
        for each row  of data
            tbody_domnode .appendChild (create_row (row));

        sort_table (tbody_domnode, sort_func);
    }

 function create_row (row)
 {
      var tr = document .createElement ('tr');
      tr .timestamp = row .timestamp;         // miliseconds in UNIX epoch
      tr .title = tr .timestamp;              // for debugging
      ...
      return tr;
 }

除了sort_table之外，还有很多工作正常，这是我在这里改编自另一个问题的代码。我是jQuery的新手，所以我有几个方面我不明白。

在任何情况下，几乎都可以工作，但是通过将鼠标悬停在表行上，某些时间戳（如标题元素所示）会出现故障。这是完整的排序代码。

function sort_table_rows (tbody, sort_function)
{
    var rows = $("tr", tbody);

    rows .sort (sort_function);

    rows .each (function (index, row)
    {
        $(rows) .append (row);
    });
}

function sort_func (a, b)
{
    return a .timestamp - b .timestamp;
}

我是否正确使用jQuery函数对tbody_domnode中的tr节点进行排序？或者我应该在其他地方查找错误？

Answer 1

今天的大多数新代码都会使用某种类型的数据绑定框架（如AngularJs）来保持代码更简单，甚至是简单的templating解决方案。

如果你只是坚持使用jQuery，而不是尝试对html进行排序，那么只需处理数据并根据需要完全重新创建html就更简单了。您可以使用.data('key', value)将数据附加到jQuery元素，其中value可以是任何对象或数组。

所以一开始你可以做$(tbody_domnode).data('serverData', result)。然后，在需要时使用sort函数对数据进行排序，并在想要显示结果时完全替换tbody内容：

function paintRows(tbody)
{
  var $tbody = $(tbody);
  $tbody.remove('tr');
  var data = $tbody.data('serverData');

  $.each(data, function(index, rowData) {
    ...create and add the row to the tbody
  });
}

为什么这个jquery驱动的表排序不起作用？

1 个答案: