I have one real requirement: Automated Pagination from html.
That is I want to generate an HTML table with Django, and for the Plugin decide on which <tr> item to split it up (based on a configurable setting, or browser size - i.e. something like automatically designate items to further pages if the content overflows the div).
Well and secondly I guess interactive row sorting (but all plugins seem to do this).
I'd greatly prefer to make the table in the HTML part of the template rather than to generate it with Javascript using Json data. Also please don't recommend Django-tables2, it's absolutely horrendous.
Related
How can I detect if a Table will trigger a new page and conditionally do things that make the printed experience better?
For example, if I have a table that must span a page break (despite intelligent use of the break-before / break-inside CSS properties), can I detect this and do something like re-render the column headers? Is there a way that I can detect the size of my output as it is rendered to understand if I'm in a page break zone, and then conditionally reform my html to accomodate?
I'm currently programming in Angular - but any JS/HTML/CSS based solution I'll be able to adapt.
Hi fellow Javascripters,
I am using both Angular and D3 in my project (no jQuery, which I intend to keep this way). One thing that I want to support is to enable users to play with 'raw' tabular data. So, data from a CSV is loaded into my app and displayed in a plain old fashioned table (currently with Angulars ng-repeat). However, I now want to be able to animate that columns of the table get reshuffled. So, as a simple example, I would programmatically want to switch column 2 with column 4 and this transition must be D3-like. Furthermore, easily dragging whole columns to other positions should be possible.
Since I am not really experienced with working with jqLite inside Angular directives, my preference would go out to a solution based on D3. I can then see two possible solutions:
Render all of the data in a regular table using the D3 append functionality. Whenever column order changes, somehow reconstruct the table and create a smooth transition.
Simulate a table with div's and css (not looking forward to that though), to enable easy repositioning of data.
Since both solutions are far from trivial (I would say), I would really like to have some opinions. Do you see any other solutions for me? And if one of these two solutions seems right for you, how would you go about implementing them?
Thanks in advance!
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 Remember reading an article by Marcus Egger a while back about when to and when not to use a gridview style control. I can't find it now...
I have a member on my team who has just found some jquery grids and is determined to use them for everything...
I mean everything from lists of data (which I have no problem with) to using it as a primary means for CRUD on single items (which I find lazy and overkill).
Does anyone have an opinion on this?
Any good articles?
Am I being too picky?
I have used jqGrid control for some projects, and find it to be very powerfull and customizable. And there is a great support for all possible questions here on stackoverflow by Oleg.
However, it is impossible to give reccomendation for any scenario, as there is no silver bullet, and not even jqGrid is optimal for all scenarios.
When you need to have ajax loading and paging, (multiple column) sorting, filtering, inplace editing, enumerated column values, jQuery UI theming - jqGrid is one of the best tools. It supports all that, and different types of data formats, including json and xml.
However, sometimes you only need simple web app for administrator to perform CRUD operations on some codebooks, without requirements for specific looks, ajax and all the bells and whistles, and jqGrid is overkill in these cases, especially if autogenerated mvc scaffolding or asp.net dynamic data application does the job well. Or maybe there is no requirement for grid, if there is only a list of something needed, and it can be done in 15 minutes, then you should NOT use any grid control. There are also cases when displayed data can be more user-friendly, i.e. contact information - you will find someone a lot faster if you display large name and/or picture and smaller address, phone etc aside in a unordered list than you will do the same in a grid-styled display of same information (and you cannot put picture as it will make your row height too big).
Regarding "lazy" part of your question, I would not agree as there is often more work to make jqGrid working than use some out-of-the-box component. With jqGrid you can implement inplace editing (inside jqGrid), but you can also make completely customized form (not different from one someone expects at edit page) which is loaded into edit dialog.
Why don't you use a repeater control, then you have full control of your markup.
Or do something like that:
<table>
foreach(var i in data) {
<tr>
<td>....etc </td> </tr>
}
</table>
I would like to display to user a table which contains ~500,000 rows.
The table should be calculated based on a file (i.e. the table is known at the beginning, and does not change).
I guess that building the HTML text of this table is not a good idea in terms of memory performance.
So how can I build such table ?
I would like user to be able to scroll the table using a vertical scroll bar. Is it possible to build on the fly only the visible part of the table ? I'm afraid to see delays because of this.
Is it a better idea to use server side programming rather than Javascript ?
I'm not restricted to any server side programming language, so any advise would be appreciated !
Send the first 250-ish rows to the user, as he scrolls down, perhaps past row 200, fetch the next 250 rows, append to the table and so on.
This is a (ui) design pattern known as "Infinite scroll".
Displaying 500,000 rows all at once to a user is a bad idea. Consider other options:
allow user to download file as CSV
show paginated (still not very useful)
provide filtering mechanisms (by date etc.) to allow the user to only see the data they need
If the users really needs to see all that data at once, then viewing it in the browser is one of the worst ways to do that - they should be using a tool made specifically for viewing data, like Tableau.
Classic example of where to use ajax.
Use javascript in combination with a server side script.
This really is a case for server-side pagination, I would say, maybe in combination with Ajax. A HTML table with 500.000 rows is going to crash a lot of browsers.
You're not specifying which server side technology you work with. If you update your question, I'm sure people will be able to give you some pointers.
Try this:
Clusterize.js
Tiny plugin to display large data sets easily
https://clusterize.js.org/
Is it possible to build on the fly only the visible part of the table ?
If you build a "fake" scroll (e.g. jquery slider) you can retrieve parts of the table instead of the whole.