So, I have a table I want to sort with the jQuery tablesorter plugin.
If I put everything -- column headers and data into a single table, everything sorts super easy. However, if I have lots of rows in my table, I want the data rows to be in a scolling div. Any ideas on how to fix the header row in place?
Many thanks!
So, I figured this one out. (Sorry, didn't have code I could actually paste, and spent the time fixing my code rather than coming up with something I could post.)
What I ended up doing was something like this:
http://tablesorter.com/docs/example-trigger-sort.html
The problem I had was not having a in the table I was trying to sort, because I had a different table containing the column headers.
Related
I am working on a simple application that displays a table based on selected features and companies a user wants to compare. I am using Bootstrap 3 but because of the way my code works, I cannot use DataTables. I want the table header to float, and I have tried quite a few methods to get this to work. This includes JavaScript/JQuery/CSS solutions on the table header and JS/CSS solutions on tbody scrolling.
One problem is that my code destroys and rebuilds the table every time a user changes their selections. I am pretty new to Web development and this is the only thing so far that has really given me issues. I would really appreciate any help! Thanks in advance!
Link to working version: http://www.buyvm.theoks.net/b-rant/EHR_Tool/EHR_Form.php
Floating headers / scrolling tbody is just not viable in HTML right now. It seems the best you can do is have two tables: the first for the headers, and the second for the body wrapped in a <div style=overflow: auto;></div> and hope the columns line up.
<table><tbody> scrollable?
How can I let a table's body scroll but keep its head fixed in place?
I've been using jsfiddle.net to try and prototype a scheduler where the items to be scheduled are dragged and dropped into it. I've gotten dragging and dropping from an "unassigned" list and onto the schedule table working. I've also gotten the ability to remove from the schedule table working. What I'm having a difficult time wrapping my head around is moving an item in the table to another part of the table.
The fiddle is located here. I'd appreciate any suggestions on getting internal drag and drop to work. I've been working on this all day and I'm starting to get blurry vision. Oh, and by all means if you think what I'm doing can be done better, please make the change, just let me know what version the fiddle is up to.
UPDATE
As per #SMathew and #darksky I've rebuilt the whole fiddle where I'm not directly shifting the table cells around, but instead their content.
I know you guys recommended using divs and/or spans, but I want to use the structure of the table, especially the rowspan to designate the height of the cell in 30 minute increments. It does work a lot better now, with the only bug being moving cells (or moreso their contents) around because I have to restore cells affected by the rowspan at the source site and remove the cells that will conflict with the rowspan at the target site.
The updated fiddle can be found here.
UPDATE 2 (FINAL)
So, I went back to the drawing board again, and after 64 fiddles, I finally got it to do what I want. In the end, the trick to get everything to work fine without manipulating the structure of the table. All I had to do was set cells that are in the way of a rowspan to display: hidden.
Anyway, for anyone whose interested, the new fiddle is here. I did discover that Chrome has some issues handling the API. I've noted them in the fiddle (along with a partial rant).
The problem is that you are trying to make the td elements draggable. When you remove/insert td elements from a table like that, you have to create a bunch of empty cells to balance it out. I would suggest keep the table intact and wrap draggable elements in a div or span tag. This way the table structure never changes. Your code will also be much simpler and efficient.
I have a large table of data with probably about 50 columns and a couple hundred rows. I have tried out many jquery plugins to freeze headers and columns but they don't seem to work correctly. After you add so many columns and rows, they either freeze or take forever to load. From what I can tell, the problem has to do with offsetHeight and offsetWidth but I don't know enough to fix it (or if it's even possible to fix).
I have tried using dataTables as well as fixedheadertable. I know that the problem is when I add the jquery. If I don't use jquery, the table loads instantly.
Does anyone have any recommendations or any ideas on how to do this without javascript? The data is a huge report so it all needs to be on 1 page. I need to be able to freeze 2 header rows and 2 columns. I also want the table to be able to expand to 100% width (and maybe 100% height).
I would break your table into two tables. Have the first table have nothing but your table headers, then put a second table underneath, with your table rows.
Then put that second table into a scrollable div, so that as your scroll your 100 rows, your headers will still be visible.
Something like this fiddle
I would like to realise a table with a specific functionnality on header, in fact I would like to do like in Excel spreadsheet, a header capable of displaying a list of any elements in the column...
I looked over datatable for Jquery and others plugin, but no one could realize what I want. Does anyone know if such functionnality already exists ? And if not, what would be the easiest to implement it..?
Thanks
Not sure if I understand what you are looking for but doesnt this example of data tables achieve what you need ?
http://www.datatables.net/release-datatables/examples/api/multi_filter_select.html
I have a set of tables in a build that use the Tablesorter 2.0 jQuery plugin to sort columns of data. It works perfectly fine until I get to a more complex table that has multiple TH rows.
Tablesorter 2.0 automatically detects the first set of THs and makes them the sorting trigger. There's no way to override this with a selector.
My complex table has multiple TBODYs with rows of THs on top like so:
I'm going to give www.datatables.net a go to see if it has a way around this but I'm worried I could run into JS conflicts with both plugins running on the site.
Any other suggestions of how to achieve table sorting within each TBODY using the row where you see 'My Equity' as the sort headers NOT the dark grey header row at the top?
An example of the source HTML is here: http://pastebin.com/CYd06L87
Datatables is a very powerful grid sorter and you should have no problem using multiple TH's. They also have solutions for table details, which might be an alternate way to approach this task. For example, you could have two main rows, one for your equity and one for your equity, all in the same table. Then, setup row details to accomplish your goal...just one possibility.
Here's the row details tut: http://datatables.net/release-datatables/examples/server_side/row_details.html
There's also a solution for summing row totals.