Performance comparison between jQuery Datatable and jQGrid?

Question

We implemented the jQuery datatable for 3000 to 4000 rows of data along with 50 columns. But it degrades the performance as we implemented the different functionalities of datatable like column level search, global search, mrender, pagination etc.

We are using jQuery v1.7.2 and jQuery dataTable 1.10.7 js. How to improve the performance of jQuery datatable or any other alternatives to jQuery datatable to display such a huge data?

One of my friend suggested to use jQGrid.

What is the performance comparison between jQuery datatable and jQGrid? Which is better? or any alternative to improve performance?

Bioastronautics

3000 or 4000 rows is not really large grid (at least for jqGrid). jqGrid support many scenarios, for example server side paging, sorting and filtering of data and the client side (if loadonce: true option are used). One can even use loadonce: true option with 4000 rows. How many rows you display at once? The usage of 50 columns sounds strange. I suspect that the large number of columns makes more performance problems as 4000 rows. How you display the data? Do you have many hidden columns? Some more details, pictures would be required. – Diplegia

Thanks Oleg for your valuable guidance. We have 50 columns to show and no column is hidden. But we have given facility to users to hide and show column which jQuery DataTable plugin provides. We need to show all the 4000 rows once as we facilitated the user to choose number of records to display in DataTable and Users can select option to show all the records at once. So for above mentioned scenario can we use jQGrid ? Please suggest. Is jQGrid shows better performance for mentioned scenario? – Bioastronautics

I don't know dataTable. So I can't really compere the performance, but I could help you to create jqGrid which display the data. I still don't understand how you need to display the data and what will be displayed inside of the grid (texts, numbers, dates, checkboxes, icons, links, ...). Have the grid horizontal or vertical scroll bar? Which page size you have? It would be practical if you would include the picture which shows how the grid created with dataTable looks like. What is slow now in the grid (initial loading of data, sorting, filtering, ...)? Which web browser you use (old IE)? – Diplegia

We displayed texts, numbers, dates, check boxes, icons, links, ...etc into the DataTable and we are testing it on Mozila 40.0.3. – Bioastronautics

@Bioastronautics Is there any update with this question? What solution did you end up using? Could you explain if you have a better solution? In any case you should accept an answer so that it helps future visitors. – Loring

Answer 1

I have been using jgGrid in production for quite a while now. I had an option too between selecting datatables and jqGrid. I have tested both. Datatables performance deteriorates with increasing record size.

For using jqgrid, loadonce: true should not give a problem as @Oleg mentioned in the comments up to 10,000 records.

I have tested jqGrid in production for over 2 million records and its working just fine. It is noteworthy that I implemented server side paging here and used json as the return datatype.

I have implemented tons of extra features like filter toolbar(This implements search globally), Inline Editing, Server side as well as client side pagination, and tons of other features which jqGrid supports.

Moreover its really easy to extend jqGrid functionalities and add your custom functions as per your requirements.

As an added bonus, you can get lots of help with already asked questions (or ask your own) on StackOverflow for jqgrid.

Loring

Thank you Dipen for your valuable response. – Bioastronautics

I will give it a try and report my experience with jqGrids – Elke