Loading 2 jqgrids on one page with an AJAX call with good performance

Question

I am attempting to load two jqgrids onto one page with ajax. My problem is that the first grid loads quite speedily and the second takes several seconds. Paging through the second also takes a a few seconds.

Here is the structure of my code. This is the jquery that calls the ajax with the table elements on the page.

$(document).on("click", "#loadTables", function(){
  $.post("./ajax/page_with_tables.php", {}, function(data){
      $(body).html(data);
      build_first_grid();

      window.setTimeout(function(){
        build_second_grid();  
      }, 10);
    });
  });

Both grids load, and functionally work as expected, but the second grid is painfully slow. Both grids have approximately 3000 rows. The "build_*_grid()" functions are simply the calls to jqgrid to build the grid, nothing special. Both are using their own ajax calls that returns XML.

The timeout function is there because if both are loading at the exact same time there is an issue with the graphics. A short timeout solves the problem.

Here is the html being sent to the browser from page_with_tables.php

<div id="tableOne"><table id="tableOneData"><tr><td></td></tr></table><div id="tableOnePager"></div></div>

<div id="tableTwo"><table id="tableTwoData"><tr><td></td></tr></table><div id="tableTwoPager"></div></div>

I have searched and asked, but I can not seem to find the issue. Help is much appreciated.

Hard to tell pal, have you tried to load them separately? Maybe load second first, so that we know for sure it is not the data loading, but in fact loading two instaces of jqgrid. You can also debug how long the ajax call is taking with your browser. — Hanlet Escaño, May 31 '13 at 20:11
After MUCH testing I have figured out that it is the call from the database that is taking a long time. As to why, I have no idea, but that is a different question entirely. Thank you all for the help. — Matt, Jun 05 '13 at 19:44

score 0 · Answer 1 · answered Jun 01 '13 at 23:32

Few questions to think about:

In order to narrow down the issue, have you tried to load just the second grid and see if that is slow by itself? If not, try to switch around the loading order i.e. load second grid before the first grid.

And here are some ways to speed up the data display in the grids:

1) Call the build_ _ _grid(); in the $(document).ready() function of the page. And onClick event, just make ajax call and load the data into the grid using

jQuery("#tableOneData").jqGrid('setGridParam', {url: ajaxUrl,datatype: "xml"}).trigger("reloadGrid");

2) Remove the timeout - If you have to load the grids with a time delay, load one grid in the loadComplete event of the other grid.

3) Make one AJAX call to the server and get both grid data in single response. Now separate the row data for each grid in JavaScript and load the two grids.

score 0 · Answer 2 · edited May 23 '17 at 11:43

Probably you don't use gridview: true option and use large value of rowNum (see the answer for more details). Loading of 3000 rows in 2 grids should be typically not so slow. One more typical reason why panting of grid is low is usage of some modification of the grid in the loop inside of loadComplete or gridComplete callbacks. You should post your code if the above recommendation will don't help you.

By the way usage of JSON instead of XML reduce the size of transferred data. Using GZIP or deflate compression of the server response is also strict recommended. Typically it's just the metter of configuration of your web server.

Loading 2 jqgrids on one page with an AJAX call with good performance

2 Answers2