问题
While working on a large list of tabular data that needs an easy sorting/filtering system, I discovered the Isotope library, which seems to do exactly what I want, and provides a lot of nice visuals and functionality. I'd like to be able to sort and filter table rows using Isotope, and I've come up with a basic demo that seems to work. However, a few bugs are present:
- I'm using the <thead> section for filters and row headers, so I'm applying the Isotope selector to the <tbody>. However, when Isotope is initialized with the tbody as a container, the table cells in each row lose the width assigned by the table formatting. This isn't a huge deal, as I can set column widths manually if I need to, but it is rather annoying in the current context.
- The rows are placed outside the table, in the top left of the table's container element. The relative positioning on the tbody element seems to not affect the rows' absolute position style rules (applied automatically by Isotope) as it would with a normal div. Normally, the absolute positioning would be relative to its container element if the container was positioned using either absolute or relative positioning, but this doesn't seem to be the case here.
The table rows are being filtered properly, and the Isotope library is properly applying animations and styling with those exceptions. If at all possible, I'd like to keep the use of tables, as the people maintaining this page will be doing so through a CMS, and don't know enough about HTML or the WYSIWYG editor the CMS uses to consistently produce any HTML structures beyond a fairly basic table. Does anyone have any advice on fixing these two issues? Thanks!
Edit: As an addendum, I've solved the initial problems I was having. Turns out, the tbody element does not accept a position: relative or position: absolute attribute, so the table rows were not being placed properly. Setting the whole table to position: relative solved the main placement issue, though the rows were then moved to the top left of the table. I solved this issue by offsetting the table row top attribute by the height of the thead element in Javascript, since without Javascript the display is normal.
This works beautifully in Firefox, Chrome, Opera, and Safari. However, IE 7, 8, and 9 all have rendering issues--and worse, they're all different rendering issues. IE9 refuses to place the table cells with the correct offset, IE8 doesn't show the rows at all, and IE7 seems to interpret the whole situation to mean "EXPLODE!". At least the main problem I encountered was solved!
回答1:
I've integrated Wesley's style suggestions to implement Isortope -- a jQuery plugin using Isotope for table sorting.
It addresses things like the column width issue by automatically converting the table's generated column widths into inline styles. That way, the final table displays like the initial one.
Simple demo here.
Download here.
来源：https://stackoverflow.com/questions/10404933/jquery-isotope-library-with-html-tables