How to hide specific rows in Handsontable.
I have buttons in DOM, each of them should hide specific rows.
For example: click button with class `alarm' should shide all rows which second column has value 'alarm'.
For now i do ugly thing. Every button click i loop overy my tableData and delete datas with 'alarm' then just load data and render table. But i can't do that becouse i have some dynamic datas so after render their disapear.
eveGrid.loadData(tableData);
eveGrid.render();
Dynamically hiding rows is quite a complex task which is not documented in the Handosntable documentation. However, there is plenty of functionality available to implement it ourselves. As a matter of fact, I had to do this just last week so I can share with you a potential approach. It's really quite simple and similar to your solution, which is not ugly by the way!
What you want to do is keep two copies of your data. The first we can call data, and the second activeData. Initially, they both equal each other. Now this part is tricky and not easy to grasp but what you have to make sure is that these two arrays are DIFFERENT OBJECTS, but have the SAME REFERENCED ELEMENTS. What this means is that the arrays themselves are not clones, so an equality test would fail. However, their elements are clones. Your activeData elements are just references to the elements on data.
Once we have this set up, it's simple to implement the hiding of rows. Your click should look through data and set a new activeData based on the matching rows you want to display. Then just update handsontable with something like:
hotInstance.updateSettings({data: activeData});
And that's it! Note that that updating method will automatically trigger a render().
Let me know how it goes, I'm curious to see if other people can use this approach.
I am developing a webform which needs to have LineItems ie. some textboxes, calendar,dropdowns etc in a row which can be added dynamically on button click.
An example from my previous works:
I developed this using a GridView and maintained the state of controls using DataTable and ViewState on Click to Add link button.
The problem with this approach is that it becomes very slow as number of controls increase.
What are other alternatives? I know I can use repeater but I am not sure how much difference is that gonna make? I would not want to explore new way if the performance improvement is like 5%.
I can use jquery and html client side elements but then maintaing state would be a headace (I cant avoid postbacks , there are already many drop downs and fileuploads on the same form that cause postback ).
OR if there is an easy way to maintian the state of HTML elements?
This is not opinion based question since , performance and be percieved and measured.
I can think of several options:
Implement paging/limiting so customers can only see N rows at a time
Implement master-slave views: split one large table in two. Master table only lists items and slave table only show details for the currently selected row
Search for other jquery plugins, perhaps there are newer/faster plugins available (sorry couldn't offer any better alternatives, but they might exist)
You may find good answers at UX design web-site, such as How To Display Too Much Data, tables with lots of columns, Best way to display more table columns and rows than I have room for?
I'm writing a web application that displays a large number of rows of data (~2000 at present), each of which has a drop-down "select" element with ~100 options. Any of those options can be selected by default. I'm generating all the actual DOM elements client-side. My problem: rendering this beast takes ~4 seconds on my relatively recent machine, which is really suboptimal. I know the problem is specifically with all the select elements, because replacing them with a bit of static text or a single-option list causes render time to be nigh imperceptible.
The vanilla code, minus failed experiments (see below) is here.
Avoiding the suggestions of "paginate your data" and "don't have so many options in a select", what is the most efficient way I can write my append / render code, assuming I do have a legitimate reason to display that much data and have that many options? For my purposes, Firefox is the only platform I care about.
Things I have tried:
Using an async loop to append rows to the table (slower than a regular loop, and oddly didn't render the intermediate results)
Building up a string that represents the body of the table and inserting it into the DOM in a single call (almost identical performance)
Instead of inserting the entire options list, inserting a single-option "select" element, and then populating the entire list when the "select" element gains focus (presumably because someone is trying to change it). This was actually pretty high-performing for the initial render, but then populating the element with the full list caused some weird behavior, losing focus and never actually being able to "open" the select element.
Right now my default assumption is that the third option is the way to go, and I need to figure out how to do some bookkeeping about what has already been populated. But my suspicion is that there is a plainly better / faster / more idiomatic way to do this. Is there?
Yes, I would "lazily" generate and/or populate the dropdowns.
That is, only create and populate the dropdowns when the user clicks on them, as probably almost all of the dropdowns in the 2000 rows will never be used right?
Perhaps a select element might not be the best UI here too, but instead some kind of HTML menu like so: https://jqueryui.com/menu/ that is created, populated and displayed only when the user clicks on some kind of button to display it.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I've been working with tables and a huge amount of data. There are a tables in my website with 10 thousand rows. This table has dynamic search, filters, etc. I've been using pure JavaScript considering performance, but it gets laggy with this amount of rows.
Do you guys know any alternative for pure JavaScript with better performance?
EDIT> I REALLY need to load the 10 thousand rows at once. I can load them all in the browser in 5 seconds. The main problems are the filters and search...
EDIT2> The search is dynamic. I can search by name and filter it by first character.
I've been working on it for months...
SEARCH:
search when the field has more than 3 characters and only when its length and characters has changed (onchange event on input may trigger multiple times when a character changes, so I make sure it only triggers once using some verifications)
each row that matches the searched string is coppied to another table. The original table is hidden and the new one is displayed.
when the user changes the search field or cancel the dynamic search, the new table is erased.
Conclusion: it's faster to create a new table with desired elements than hide the undesired ones.
FITLER
The rows are actually in 25 tables (A to Z + non-alphabetical characters)
When you select a character, only that table is shown
Conclusion: it's faster to hide a whole table than hide the
undesired rows
Thanks for the repplies. I've edited with some extra info so we can narrow the possible solutions...
I'm asuming you get the contents from database and load with with something like PHP (I'm going to asume PHP for now)
You could make the Javascript make an ajaxcall to a php-file which does the filtering (actually you should make the database do it, a lot faster!) and place the resulting table back on screen.
A faster method combined with the above might be this: Get all id's on the initial rows in an array and save those (in a session might work pleasant).
When you have to filter, don't make PHP get the whole table, just apply the filter to only the stored id's and send javascript the matching rows.
Then make javascript do something like this:
- set all visible
- set resulting id's to hidden (hidden in favor of remove, because I think a user might perform multiple filter actions?)
Another idea just popped in my head: If you don't need to display it on load, you can start the initial load with all tables hidden and a message "please search to display".
A common technique to handle this case is to load the data in memory or a subset of the data, and recycle your table rows such that you aren't actually ever creating thousands upon thousands of rows. You can get creative with this and create a web interface that seemingly scrolls endlessly but in reality you are just reusing dom elements and shuffling them around.
Most well-built data grid widgets whether they are on the web, mobile or even a desktop interface will employ this technique to handle your particular problem.
In most cases a user will never actually find themselves benefiting from seeing 10's of thousands of rows of data at once anyway.
fetch from the server only the things to be seen by the user, Like everyone has pointed out 10,000 rows needn't be there on that page.
you can use the concept of pagination and for every page few rows are fetched and shown . JQuery's Ajax is capable of calling the server side function to fetch rows to add them to your page.
don't know any backend details here, but in struts framework there is display:table tag and I believe in .NET framework there is GridView for pagination in the client side that you can look into
I'm just a student, newly joined to the community. Take what I say with a grain of salt.
I'm not sure why everyone is so much as blinking at the ten thousand rows business when we're measuring modern personal computers' memory in gigabytes.
Alright. I'm going to assume that what you're doing needs to be done in the browser, and so you can't switch to doing native code. In that case, looking for an alternative to Javascript won't get you much of anywhere. In the context of a browser, you're looking at an interpreted language. In terms of number of instructions the program ultimately has to run, the difference between one language or another is negligible in the face of how long it takes to be interpreted. Besides, Javascript has gotten nicely polished over the years.
So never mind that. There's a much more important thing to consider here, and it applies no matter what you're programming in or on: The cache(s). Igor Ostrovsky explains it beautifully; read it until you grok it.
So I'm guessing you have objects that would stringify to something like, "obj1 = {field-1:'a', field-2:'b', ..., field-n:'n'}". And you can select a field-i to sort by. The trouble with this is that when you sort by field-i, you're loading the entirety of obj1 into the cache, even though you don't need it. What you really want to do is load the field-i's forobj1, obj2, obj3, ..., objm all at once. So you look at an array, stringifying to something like: "field1 = [refToRow1, field1inRow1, refToRow2, field1inRow2, ..., refToRowM, field1inRowM]".
You might not be able to do fit all M rows in the cache, after all M==10000! But you can group them together into chunks that you could reasonably expect a cache to manage. Anyone got a good number for this? Say, 64kB? So you figure for each i in M you've got a reference, and a field that's probably just a reference to a short string (it'd be better if you could have the string itself right there, but I don't think Javascript works that way). So that's 8B? 8B*1024 = 64kB? Hell, if that's right, you could fit it all into the cache in two chunks, which means you'd want to do it in 4.
So now you've got a collection of smaller arrays, and you want to sort them. This is a classic application for B-trees. And while having a separate B-tree for each and every column in the table may seem like a lot, it's not.
Okay, so that handles sorting. You tell it to sort by a column, and the truth is it's already sorted! You're just repopulating the visible table using a different b-tree. You still need to handle filtering, but that's fine. You do some cache juggling as you find something to display and follow the reference to get the other fields, but I'd still expect this to go fast since you're skipping over so many rows.
Normally, I would say if you want to speed things up, look into multiprocessing. But I think browsers are still working to make that a thing with their Javascript implementations. Plus, while it would be well-suited for sorting, it would be a lot of effort to make it useful for the filtering part, and I expect you can do fine without.
I hope this isn't too scatter-brained, and that it gives you some ideas. Good luck!
I'm building a budget webapp, mostly for my personal needs and for the sake of self training. I may release it later at some point.
The interface will feature a table of operations (credit / debit). I was planning to use Ajax to make the table "editable" by clicking in a cell (Excel-like).
I therefore need to:
diplay operations
add new ones
modify existing ones
I fail to see how to make "modify" degrade nicely, as if you remove JS, this will be a plain old table without the possibility to modify an existing entry.
Turning the table into a giant form would be ugly, adding links to edit each operation then hide them using JS seems fairly complex...
One possible solution would be to add links that go to other forms that allow the modify operations to take place. This is much less fluid than in-place edits for accounts, but it still remains accessible without being burdensome (like a huge page of form inputs would be).
You can then override the links with javascript to give the ajaxy, web-app functionality you are looking for.