Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can javascript sort, filter, and render a very large table?

First of all, I have no idea of Javascript's capability on this. But would like to know if it is possible:

  1. To read from a text file and display a very large table (a couple dozens of columns and a few hundred thousands of rows), in sections;
  2. Not all columns will displayed in the same time. columns are in groups. a group of columns needs to toggle between hidden or show;
  3. rows can be filtered based on certain columns.

The reason to do this is to make a report that displays data analysis results and also provides basic filter, sorting functions for the user. They most likely to have some sort of web browser. So HTML would be an ideal format.

Is it possible with Javascript?

Thanks!

like image 592
xyliu00 Avatar asked Sep 21 '12 14:09

xyliu00


People also ask

How HTML table implements sorting using Javascript?

add a click event to all header ( th ) cells... for the current table , find all rows (except the first)... sort the rows, based on the value of the clicked column... insert the rows back into the table, in the new order.

How do I make a table sortable?

How to Make Sortable Tables. Adding the “sortable” class to a <table> element provides support for sorting by column value. Clicking the column headers will sort the table rows by that column's value. Tables must use <thead> and <th> tags for sortable functionality to work.

How do I sort table headers?

Sort Table by Clicking the Headers. Click the headers to sort the table. Click "Name" to sort by names, and "Country" to sort by country. The first time you click, the sorting direction is ascending (A to Z).

How do you sort a column in Javascript?

Here is an example code below, all you need to do is match the ID on the table tag with the ID mentioned in the JS, add sortTable to each column TD you want sortable (make sure you use correct column depth starting at 0) and make sure you code your tables properly, ie. with a thead and tbody.


2 Answers

You might be able to do this by using a grid plugin. For example, have at look at the answers to this question: JavaScript data grid for millions of rows

like image 118
Justin Ethier Avatar answered Sep 30 '22 21:09

Justin Ethier


I would recommend a javascript table library such as DataTables. It includes sorting, filtering and pagination options.

Also it has functionality to hand off all the paging, filtering, sorting etc. that DataTables does to a server. The javascript lib DataTables then is just an events and display module. In this case, any number of rows can be handled.

So you would have all the functionality you need, with the ajax-y quick performance of the data loaded in javascript with the scale to handle any number of rows.

Server-side data processing with DataTables

like image 31
anataliocs Avatar answered Sep 30 '22 21:09

anataliocs