jQuery Grid Plugin - jqGrid - Topic: Performence issue with tabletogrid http://www.trirand.com/blog/?page_id=393/help/performence-issue-with-tabletogrid Simple:Press Version 5.7.5.3 koenboone on Performence issue with tabletogrid http://www.trirand.com/blog/?page_id=393/help/performence-issue-with-tabletogrid#p27821 Help http://www.trirand.com/blog/?page_id=393/help/performence-issue-with-tabletogrid#p27821 Not counting the nested ajax calls, I found this 'reworked' tabletogrid function that is a lot faster:

http://s339.codeinspot.com/q/1918992

It does however produces some disadvantages, for example column sorting doesn't seem to work anymore.

But it is surely faster if you only need to display a grid 🙂

]]> Sat, 01 Dec 2012 23:13:10 +0200 tony on Performence issue with tabletogrid http://www.trirand.com/blog/?page_id=393/help/performence-issue-with-tabletogrid#p25573 Help http://www.trirand.com/blog/?page_id=393/help/performence-issue-with-tabletogrid#p25573 Hello,

Sure it is possible. You have 3 nested ajax calls - please check these calls how long they are?

As simple as possible please test it without these ajax calls.

Not sure, but I think you should implement ajax queene.

Regards

]]> Tue, 03 Jan 2012 13:52:22 +0200 elwood on Performence issue with tabletogrid http://www.trirand.com/blog/?page_id=393/help/performence-issue-with-tabletogrid#p25569 Help http://www.trirand.com/blog/?page_id=393/help/performence-issue-with-tabletogrid#p25569 Hi there,

I got heavy performance issues with the tabletogrid function. I try to convert a table with 325 records. It takes about 3 seconds to build the html table, but afterwards, when I try to convert it, it takes about 1.5 minutes. Is there a chance to improve the speed? It would be great, if anybody could give me some good advices.

Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

  <head>

    <link rel="stylesheet" type="text/css" href="/smards_html/ui.jqgrid.css">

    <link rel="stylesheet" type="text/css" href="/smards_html/jquery-ui.css">

    <link rel="stylesheet" type="text/css" href="/smards_html/jquery-ui.custom.css">

    <link rel="stylesheet" type="text/css" href="/smards_html/searchFilter.css" />

    <script type="text/javascript" language="JavaScript" src="/smards_html/jquery.js"></script>

    <script type="text/javascript" language="JavaScript" src="/smards_html/jquery.transform.js"></script>

    <script type="text/javascript" language="JavaScript" src="/smards_html/jquery.jqGrid.js"></script>

    <script type="text/javascript" src="/smards_html/jquery-ui.js"></script>

    <script type="text/javascript" src="/smards_html/grid.locale-de.js"></script>

    <script type="text/javascript" src="/smards_html/grid.base.js"></script>

    <script type="text/javascript" src="/smards_html/grid.common.js"></script>

    <script type="text/javascript" src="/smards_html/grid.formedit.js"></script>

    <script type="text/javascript" src="/smards_html/grid.celledit.js"></script>

    <script type="text/javascript" src="/smards_html/grid.inlinedit.js"></script>

    <script type="text/javascript" src="/smards_html/grid.custom.js"></script>

    <script type="text/javascript" src="/smards_html/jquery.fmatter.js"></script>

    <script type="text/javascript" src="/smards_html/jquery.searchFilter.js"></script>

    <script type="text/javascript" src="/smards_html/grid.jqueryui.js"></script>

    <script type="text/javascript">

      $(test);

      function test(){

        $("#selectionTable tr").mouseover(function(){

          $(this).addClass("highlight");

        }).mouseout(function(){

          $(this).removeClass("highlight");

        }).click(function(){

          $(this).addClass('selected');

          $('#gridDIV').empty();

          var vTable = $(this).children("td:first").text();

          $.post('url…?IBIF_ex=GRDR001T&|V_TABLE='+vTable,function(titles){

            $.post('url…?IBIF_ex=GRDR001C&|V_TABLE='+vTable,function(colMod){

              $.post('url…?IBIF_ex=GRDR001&|V_TABLE='+vTable,function(data){

                $('#gridDIV').transform({async:false,xmlstr:data,xsl:'url…test.xsl',complete:function(html,xsl,xml,transform){

                  $('#gridDIV').append('<div id="pagerDIV"></div>');

                  eval(colMod);

                  eval(titles);

// until here it takes about 2-3 seconds

                  tableToGrid($('#gridDIVTable'),{

                                                   autowidth:   true,

                                                   ignoreCase:  true,

                                                   height:      '100%',

                                                   width:       '100%',

                                                   pager:       '#pagerDIV',

                                                   rowNum:      30,

                                                   rowList:     [10,20,30],

                                                   rownumbers:  true,

                                                   viewrecords: true,

                                                   gridview:    true,

                                                   mtype:       'POST',

                                                   editurl:     'url…?IBIF_ex=GRDR001S',

                                                   caption:     vTable,

                                                   colNames:    vColNames,

                                                   colModel:    vColModel

                                                 });

// until here about 2 minutes               

                }});

              },'text');

            },'text');

          },'text');

        });

      }

    </script>

  </head>

  <body id="ctsBody">

    <table>

      <tr>

        <td>

          <table id="selectionTable">

            <tr>

              <th>Tables</th>

            </tr>

            <tr>

              <td>Test_table</td>

            </tr>

          </table>

        </td>

        <td>

          <div id="gridDIV"></div>

        </td>

      </tr>

    </table>

  </body>

</html>

And here are some sample data: 

<TABLE id="gridDIVTable">
  <TBODY>
    <TR>
      <TH>LINE_NO</TH>
      <TH>REPORT</TH>
      <TH>SELFILE</TH>
      <TH>FILETYPE</TH>
      <TH>TEST_VALUE</TH>
      <TH>RESULT_VALUE</TH>
    </TR>
    <TR>
      <TD align="right">1</TD>
      <TD align="left">UFFR008</TD>
      <TD align="left">DR008_01</TD>
      <TD align="right">1</TD>
      <TD align="left">0001600000255806706</TD>
      <TD align="left">05092011</TD>
    </TR>
    <TR>
      <TD align="right">2</TD>
      <TD align="left">UFFR008</TD>
      <TD align="left">DR008_01</TD>
      <TD align="right">1</TD>
      <TD align="left">0001600000256880819</TD>
      <TD align="left">09222010</TD>
    </TR>
    <TR>
      <TD align="right">3</TD>
      <TD align="left">UFFR008</TD>
      <TD align="left">DR008_01</TD>
      <TD align="right">1</TD>
      <TD align="left">0001600000854351575</TD>
      <TD align="left">01152010</TD>
    </TR>
  </TBODY>
</TABLE>
]]> Tue, 03 Jan 2012 12:05:59 +0200