如何使用jQuery进行div标签的客户端排序？

问题描述：

我想允许Web应用程序的用户排序查询的结果，而无需服务器调用。我正在寻找通常类型的点击标题到按列排序。如何使用jQuery进行div标签的客户端排序？

但是，我没有使用实际的表格。我将根据内容操纵div标签。有没有一个jQuery方法来促进这一点？

你可以证明这个jQuery将要工作的代码吗？插件可能要走，但代表性的标记可能会提供另一种方式。 – 2010-12-10 22:39:02

答

This Tutorial将引导你走向你寻找的道路。它专注于在html表格中对表格数据进行排序，但是您可以轻松地重新使用示例来处理一组div或列表元素，或其他任何内容。

一些指导教导了原始的JavaScript技术，jquery以支持为特色，所以它是一个很好的指导。例如，它教你如何在sort()方法中使用JavaScript构建。要按字母顺序排序？下面是该指南已修改的代码：

var parent_of_divs = $('#parent-of-divs'), rows; 
rows = parent_of_divs.children('div').get(); 
rows.sort(function(a, b) { 
    var keyA, keyB; 
    keyA = $(a).text().toUpperCase(); 
    keyB = $(b).text().toUpperCase(); 
    if (keyA < keyB) return -1; 
    if (keyA > keyB) return 1; 
    return 0; 
}); 
$.each(rows, function(index, row) { 
    parent_of_divs.append(row); 
});

答

看到这个question有关排序里的物品。几乎没有变化，它也可以适用于你的情况。其中，推荐使用TinySort插件。

答

你可能想看看使用jQuery的模板库。您可以创建一个模板，然后将数据对象传递给模板进行渲染。当您想要更改排序顺序时，您可以更改数据对象，然后“更新（）”您的模板。

答

有一个确定的例子在这里：

Example

我发现这是相当不错的。此外，它是一个轻量级的插件（如果你不想实现你自己的）。对我来说，即使我对这门语言很陌生，代码也很清晰。

如何使用jQuery进行div标签的客户端排序？

相关推荐