带有HTML表的jQuery同位素库

Question

在处理大量需要简单排序/过滤系统的表格数据时，我发现了同位素库，它似乎完全符合我的要求，并提供了许多很好的可视化和功能。我希望能够使用同位素对表行进行排序和筛选，并且我已经提出了一个基本的演示，它似乎很有效。但是，也存在一些bug：

• 我使用过滤器和行标题的部分，所以我将同位素选择器应用到。但是，当以tbody作为容器初始化同位素时，每行中的表单元格将失去表格式指定的宽度。这并不是什么大问题，因为如果需要的话，我可以手动设置列宽，但是在当前的上下文中，这是相当烦人的。
• 行被放置在表之外，在表的容器元素的左上角。tbody元素上的相对定位似乎不影响行的绝对位置样式规则(由同位素自动应用)，就像对正常div那样。通常，如果容器使用绝对或相对位置定位，则绝对定位将相对于其容器元素，但这里似乎并非如此。

正在正确筛选表行，除了这些例外情况外，同位素库还正确地应用动画和样式。如果可能的话，我希望保留对表的使用，因为维护此页面的人员将通过CMS进行维护，并且对HTML或CMS使用的WYSIWYG编辑器不太了解，无法持续地在相当基本的表之外生成任何HTML结构。有人对解决这两个问题有什么建议吗？谢谢!

编辑：作为一个补充，我已经解决了最初的问题。结果表明，tbody元素不接受一个位置:相对或位置:绝对属性，因此表行没有正确地放置。将整个表设置为position: relative解决了主布局问题，但行随后被移动到表的左上角。我通过用Javascript中的thead元素的高度来抵消表行top属性来解决这个问题，因为没有Javascript，显示是正常的。

在Firefox、Chrome、Opera和Safari中，这是非常有效的。然而，IE7、8和9都存在渲染问题--更糟糕的是，它们都是不同的呈现问题。IE9拒绝使用正确的偏移量放置表格单元格，IE8根本不显示行，而IE7似乎将整个情况解释为“爆炸！”。至少我遇到的主要问题已经解决了！

Answer 1

我已经集成了Wesley的风格建议来实现Isortope --一个使用同位素进行表排序的jQuery插件。

它通过自动将表生成的列宽度转换为内联样式来解决类似于列宽度的问题。这样，最后一个表就会像最初的表一样显示。

简单的这里的演示。

在这里下载。