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?
Related
I would like to take some arbitrary HTML and display it in a carousel, showing a page at a time. For example, see how articles are laid out in the NY Times iPad app. I have achieved the column layout using the -webkit-column-width CSS property, and it works as expected if I add empty carousel items:
http://www.senchafiddle.com/#ea1RR
However, I need to figure out programmatically how many dummy carousel items to add, based on the number of columns. As far as I can tell, there is no way to find the width of the text, since the extra columns are overflow and don't affect the size of the element. Any help with this issue, or ideas on other ways I could achieve the same functionality, would be appreciated.
I think this solution can be adapted to fit your needs: http://www.webdeveloper.com/forum/showthread.php?t=196319
If you have problems start a senchafiddle so i can inspect your code
I have a big HTML table (~10K rows, 4 columns, text only) dumped from a database. I'm experiencing poor performance when opening it in Chrome/Firefox.
I do not have direct access to database, so it is impossible to load page by page. All data is static HTML.
Does pagination with some jQuery plugin help improve performance in this case? Any other suggestions?
When applicable, setting table-layout: fixed helps in reducing rendering time a lot. The slowness is mostly caused by the fact that in the default table layout method, the browser has to parse and process the entire table, calculating width requirements for all cells, before it can render any part of the table.
Fixed layout tells the browser to set column widths according to the first row (paying attention to any CSS that may apply to it). This may, of course, result in a mess, if the widths are not suitable for other rows. For a data table where rows are generally very similar, the widths can probably be set suitably.
This does not change the issue that very few people, if any, are going to read all the 10,000 rows. People will probably be looking for some specific data there. It might be better to set up a search form that lets the user get just what he wants.
I had a similar problem and made a jQuery plugin:
https://github.com/lperrin/infinitable
To use it, you can load all your data with Ajax call, turn it into a huge array, and pass it to the plugin.
It basically hides cells that are not visibles, while making it easy to sort or filter cells. There are other solutions to achieve that, but this one has no dependencies besides jQuery.
The project contains a demo with a table containing 100,000 elements.
Pagination would most certainly solve this problem. You could also try initially setting the table style to display: none. Although the pagination should likely take effect before the browser attempts to render the table.
You could also store the table in a separate html file, do an ajax call to the document, and implement live scrolling. Although, this depends on how you expect the user to explore the data. If jumping to a particular rage like 100-199 is useful, a paginated table would be ideal.
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 need to represent huge data(37 columns,1000+ rows) in web. I would like to fix header row of this table and then manipulate data accordingly.
There are lots of possible solutions in web, some of them depends on css and some depends on javascript.
I have tried lots of them, and each time I ve stucked at the same point where table header cells and table row cells are not aligned.
First way i have tried : https://s12-chicago.accountservergroup.com/~gomathik/demos/scroll.html
Second way i have tired : http://www.imaputz.com/cssStuff/bigFourVersion.html#
They both, fixed the header of course. But i still have the alignment problem.
Do you have any suggestions?
I m begginer to html and css, any help would be appreciated.
Thank you in advance!
i have some experience in this and i can give you some thoughts/ pointers:
easiest way to do this is to set table style to fixed, then you can change column widths with css and they will stay that wide regardless of content inside.
after your column widths is pre-defined, you can clone the thead into another table above your table and it will act like a fixed header
otherwise you will need to:
set the height of the header to 0px
clone the header into a table above the table
set the width of the new header's table to the width of original table
set the outerwidth of each cell in the new table to the outer width of the same header cell in the original table
also, none of the solutions for doing this seem to be good. i found that writing a custom solution is always better then trying to arm wrestle an existing generic plugin into doing what i need.
I worked on a project where the goal was to visualize large data sets (10-20 columns, 500+ rows), among other visualizations, as a table.
I used Google Visualization API Table. It's simple to use and controlled with JavaScript (don't scare off!).
It has nice support for formatting (through DataTable class). It actually uses HTML table markup with some extra JavaScript and CSS in there. The Table class takes care of the cell alignment. Take a look at the examples.
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