How can I have multiple items on each row?
How can I have multiple items on each row?
I want to have a table that shows someone's "friends" in their profile page.
So I want to have an image and name for each friend.
However, I would like to stick two or three friends on each row - to save space (as the icons are 70 pixels tall). This is similar to how Facebook does it.
I'd like to preserve the pagination and search/filter feature. I'd also like to be able to add and remove people. I don't need sorting.
What is the best way to do this with Data Tables?
I am thinking about putting two or three people on a row. However, this will cause problems when I try to add or remove a row (as a row will contain multiple people). It would also mess up the pagination. For instance if there are two people on a row then DataTables will say there are 50 results, when there are 100.
Or is there another plugin that I should use for this?
So I want to have an image and name for each friend.
However, I would like to stick two or three friends on each row - to save space (as the icons are 70 pixels tall). This is similar to how Facebook does it.
I'd like to preserve the pagination and search/filter feature. I'd also like to be able to add and remove people. I don't need sorting.
What is the best way to do this with Data Tables?
I am thinking about putting two or three people on a row. However, this will cause problems when I try to add or remove a row (as a row will contain multiple people). It would also mess up the pagination. For instance if there are two people on a row then DataTables will say there are 50 results, when there are 100.
Or is there another plugin that I should use for this?
This discussion has been closed.
Replies
Do you mean something like:
| icon1 | friend1 | icon2 | friend2 | icon3 | friend3 |
| icon4 | friend4 | icon5 | friend5 | icon6 | friend6 |
?
If so, I think you might have a bit of a rough time integrating this with DataTables. For example, if a filter were to remove 'friend2' from the table, but leave all the others, all of the other information would need to be updated dynamically. This is not something DataTables supports, and I'm not aware of any other table plug-in that does (although I might be wrong!).
What I think you really need is to just have each icon/friend pair in a "float: left" div (or li) element, and implement some kind of filter on that.
Good luck!
Allan
icon1 icon2 icon3
icon1 icon2 icon3
icon1 icon2 icon3
icon1 icon2 icon3
name1 name2 name3
I guess I'll have to write up my own code. It won't be that hard, but it would be nice for usability purposes to have used DataTables. Or I might just swallow hard and go with one person per row.
...
If you were interested in doing a general feature, you could call it a table that can be split into parts. For instance, you could have three divs that each contain parts of the table (and which could be located next to each other, or on any part of the webpage). If the table was longer than the first div's width/height, it would overflow into the second div, and so on. Filters and pagination would apply to the entire table, and thus affect the three divs. I don't know whether this would be a useful feature or not! Maybe it's a little crazy =)
I think the approach you describe is probably how I would go about it as well, but it's not something that is likely to get incorporated into DataTables I'm sorry to say. DataTables makes use of the TABLE tag, rather than delegating the layout to DIVs etc. This is mainly to keep the HTML semantic, but it can also help to address random layout errors that might occur when dealing with data from as many sources as DataTables does.
Good luck knocking this up - let us know how you go :-)
Regards,
Allan