Develop Reference

Table Sorting, Filtering, Etc Matt Kruse's library

Situation:
I'm playing a little by using the Matt Kruse's library I found at the page Table Sorting, Filtering, Etc at the URL http://javascripttoolbox.com/lib/table/source.php.
It works pretty well but I wish to implement a little improvement (maybe it would be better to use the locution "new feature") and I don't know where to start because I'm a newbie in js and that js file uses more advanced programming statements I don't fully understand, not yet at least.
I have a single html file with some tables in it. Some of them are filterable and sortable thanks to that library. The number of tables may vary, the number of columns (fields) in each table may vary as well, and the number of records (rows) of each table may vary as well too. Of course the content is different in each table too.
By placing a specific css class in the th element of the targeted column I choose, I indicate to the Matt Kruse's library to create in that column a html element that is populated of a list of html elements that are computed dynamically by the js it self by picking a distinct and sole value of each record for that column.
When I wish to apply a filter to the table on the basis of certain column, I have just to choose the relative from the corresponding box and the table gets filtered accordingly, as I expect to. It works just hiding the records (the html rows) with not matching criteria in that specific column with a filter applied on it. Of course it is possible to use filters on more than one column at once if needed. It works pretty similarly to MS Excel.
The problem
When I apply a filter to a column the other columns filter drop-down combo boxes (the html elements that contain the compiled options for filtering other columns) continue to show all options instead of hiding those that are filtered in the table and are no more needed. So it becomes pretty tricky especially on complex tables to choose filtering criteria from other columns because the user has to understand by himself what are the criteria that aren't usable because the corresponding rows are already hidden by a filter already applied to another column.
One more thing: when I edit the content of one or more table cells, the filter of the relative column(s) doesn't update to match the editing made, but it seems to be to stay static.
Goal of this question
If I use a spreadsheet (as LibreOffice Calc, or MS Excel, or Google online spreadsheet, or else) when I filter a column other columns' filter drop down menu are filtered as well. If I remove a filter somewhere, other columns filters drop down are updated accordingly.
All this behavior is what I would like to implement into Matt Kruse's library. In this way it would be easier to filter by multiple columns because the boxes containing the filter criteria of the other columns will show just the filter criteria left by the all the previously applied filters.
What I have already tried
I tried to implement something to do that but it was so slow that I was too much ashamed of its execution time that I already deleted the whole algorithm I created.
For comparison using the Matt Kruse's library algorithm implies just few instants to compile all tables data into filter elements (on all tables as well). But the algorithm I've implemented needed more than 30-40 seconds for just one table. Way too inefficient.
Substantially I wrote few "for loops" that for each into each of the filtered table, compares the value of the option with each one of the corresponding column and if finds a mach keeps the option visible, else it hides that element into the . I attached that algorithm to the change event of each , so when I clicked and selected the the event was triggered and all the content of the table was updated. It worked as expected but, as I said, what I implemented was way slower.
So the question is:
How do I modify the Matt Kruse's js file to implement the feature I want keeping the highest possible performance?
(If Matt Kruse is reading this, feel free to pick up this idea and implement the new features needed above: I'm sure it would be greatly appreciated).
Thanks everybody in advance for the contribution.

DataTables: Automatic width on start-up

I am using DataTables for jQuery (https://datatables.net/) to create a table. I am using JavaScript to populate the table. When it is initially created, the columnn with has some adjustment (some columns are wider than others), but it is not perfect, for example there is a two line row as in the first picture below. After resizing and maximizing again, the table is readjusted to the optimal state, with plenty of room for the row with a long name. How to I get this adjustment directly after I load the table?

Try columns.adjust() here you can see how.

get data from main grid to populate subgrid

I need to populate my subgrid which shows some of the columns from main grid without actually going and getting data again using URL? Example:Main Grid is getting data from server (10 columns) using jsonReader. Out of which I want to show 7 columns in the parent row and 3 columns in the subgrid row . Can I do this? (Or some other way to achieve this expand concept?)

One possible workaround to use the sub-grid as 1-1 with main grid, instead of as parent-child : query all the columns as normal in the parent grid, but set the ones you don't want in main row as hidden. Then in sub-grid load event, access those fields using the "parent" row id and create them as custom fields or simply emit custom html.
This does cause duplication of the fields though, since the original main grid fields are still present, even if hidden. The html ids will get duplicated and may cause conflicts if you don't handle them.
Perhaps there is a cleaner way to do it than this (which I'm sure #Oleg will show us any minute now!)
But I wish jqgrid had a documented feature to more easily handle this kind of thing. It is very useful because you get the benefit of full inline editing in the subgrid, so you can design a much nicer edit form (eg. multiline textareas) than when confined to one straight line.
Note the presence of this feature in other grids.
Jquery EasyUI Datagrid demo
Telerik Grid Editing Demo

Does pagination on static HTML table help improve performance

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.

telerik radGrid - persist client state on sort/paging/filter

Even in this ajax example
which I really like the look of, when ever the top level grid is sorted the "state" of what you were doing "disappears"
For example,
Open the first person's row (Nancy Davolio) so you can see the Sales grid
Sort by Order Total in the Sales grid
Sort by Birth Date in the top level grid
Nancy Davoilo should now be second. Open her row.
The sales grid is no longer sorted by Order Total
This may seem trivial, or that i'm being picky; However:
If I have some text box(or some other type of method of accepting user input) on the sales grid, I would assume that this would get destroyed when sorting the top level grid.
I would also think that even if I had this input on the top level grid, that sorting the top level grid (or filtering if there were filters) would destroy this input.
It seems that even paging destroys this.
The desired behavior would be for sorting and paging not just "appear" to be done client side because it's using an ajax request, but to ACTUALLY be done client side. Meaning that the actual rows of the grid are literally sorted(filtered, paged, etc.) client side so that any client side changes such as adding text to a text box, adding a css class to an object, [or in a more complex example adding a reference to a javascript object to an object via Jquery: $("#div1").data("object",someObject) would persist after sorting, paging and filtering.
Is there a way to make this happen?
Am I making what i'm looking to do clear? If not i'm happy to clarify.
Additional Notes: I would think the client side performance hit would be minimal to do something like this as long as there were not a very large number of rows. In fact there would be a lot less work on the server in recreating all of the records, repeated calls to the server/database and as in my example at the top the subPages would only need to be created once rather than twice.

Take a look at the HierarchyLoadMode property of the MasterTableView. The demo you reference is using HierarchyLoadMode.ServerOnDemand which, according to Telerik's documentation, means that ViewState only maintains the state of the visible items. Therefore, when a details grid is collapsed you will lose its state (e.g. a sort order, page number, etc).
There are other modes. You can choose HierarchyLoadMode.ServerBind which maintains ViewState for all detail tables but requires a PostBack to expand a detail table. The HierarchyLoadMode.Client renders the MasterTableView and all DetailTables and items are expanded/collapsed on the client - no PostBack required. Either of those modes should also maintain the sort order and other state related to the detail tables.
I hope that helps answer your question.

I recently got a reply from the Telerik support that their AJAX grid supports client binding out-of-the-box with sorting, paging and filtering with flat structure only (as in this demo).
For your case you may have two options:
extend the example with grid settings persister - http://demos.telerik.com/aspnet-ajax/grid/examples/programming/savinggridsettingsonperuserbasis/defaultcs.aspx
implement custom solution to simulate hierarchy with client binding as presented in this blog post.