Viewing How to I make my tables sortable?
How to I make my tables sortable?
|
User: Jacob W. 8 years ago
|
|
|
I have tried to insert "sorttable" that I found through a google search. But I can not figure out how to add this to the website so it works... Is this the best solution, and if so, does anyone know how I would implement it into my website to make my tables for stats sortable? I have a high school basketball website: sgvikingbasketball.com. Thank you for any and all help!! |
|
|
User: Roddy 8 years ago
|
|
|
Here's a DEMO with some instructions.
------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Jacob W. 8 years ago
|
|
|
Roddy, Thank you!! That works perfect! I do have one more question if you do not mind. I have put my table into 2 divs in order to make the table scrollable. This may not be the best solution, I do not really know what I am doing beyond what I read on the web. Is there a way to link the sorting of the column headers in one div to sort the actual data in a second div below? I hope this makes sense? Here is a page I am trying to make the headers sortable with the scrollable data below in a separate div: http://www.sgvikingbasketball.com/stats/records/career-leaderboard.html |
|
|
User: Jumbo T. 8 years ago
|
|
|
Here's the correct table : http://trotter.hol.es/sort/ |
|
|
User: Roddy 8 years ago
|
|
|
The way to go is make the table head fixed and the rest of it scroll. The table is placed inside a container with a fixed height and the content set to "overflow-y:auto". Fixing the table head is not as simple as it should be but can be done using CSS or JS. I have used CSS in this DEMO. If you contact me, I will send you the HTML doc so that you can open it in an editor and change things to suit your design. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Jumbo T. 8 years ago
|
|
|
Based on this : http://jsfiddle.net/hashem/CrSpu/555/ I updated the page : http://trotter.hol.es/sort/ And it's good practice when questions are asked in a forum , they are answered in the forum. Otherwise, start your own forum. |
|
|
User: Jacob W. 8 years ago
|
|
|
Jumbo T. That is exactly what I want. Thank you! However I am so lost with how to take what you have put together and put it into my website. If you don't mind would you be willing to break it down for a complete dummy? Thank you all so much for all of the help! |
|
|
User: Jumbo T. 8 years ago
|
|
|
Look at the source of the page and copy the code. Then paste the code in a HTML Snippet. |
|
| Post Reply |
| You must login or signup to post. |