Performance Issue Rendering Large Tables

I'm trying to use html tables to show large quantities of data. In my case a matrix of 260 columns and 117 rows. jQuery/Ajax is used to get the data. And DataTables + Scroller to s

Solution 1:

The data-tables plugin is so responsive because it tries loading all data first and then you can sort/search as needed.What we can and should do in case of large datasets is to load as much data as can be handled in one view and then on click of a link or button load the next view. For a large number of rows it is fairly obvious to implement pages. [For those that use LINQ, this can be done by using Skip (pagesize(n)) and Take (pagesize).]

This is called pagination and can be enabled automatically via the jQuery data-tables API. This along with server-side processing will vastly increase the performance of any jQuery data-table.

For a large number of columns, also load only say 10 columns that fit in your view and then show a link to load more. When the link is clicked, load the next 10 columns. Keep a count of how many times it has been clicked, this will help you to understand how many columns to skip.

For more information on server side processing see http://datatables.net/release-datatables/examples/data_sources/server_side.html

Solution 2:

For large data-sets, I've found myself forced to use divs instead of table markup.

Several reasons why browsers can handle these better, mainly the entire table needs to be calculated before rendering.

Solution 3:

first hide the page after putting data in table and than show it using setTimeout function. I don't know that it will work or not in your app but it's working in my app..

ex

$("yourId").hide();
setTimeout(function(){
$("yourId").show();
},10),

May be it will work for you.

Solution 4:

Since you've a lot of columns, table-layout: fixed would probably be helpful.

http://www.w3schools.com/cssref/pr_tab_table-layout.asp