0

I am contemplating between using a grid plugin for Jquery vs manually adding rows to the html table (using Jquery). All I need to do is display the data in a table, have one field editable, then save the data to the database. i have a limited deadline and don't have the time to learn a new plugin (such as jqgrid which is quite complex).

I would normally display around 200 rows to the user..what I am wondering about is in terms of speed would it be really poor performance to add row to the html table 200 times? Would a plugin really speed up the performance (hence making it almost necessary for me to use one)? I know JavaScript can be slow when not optimized which is why I would like to know.

Any thoughts/advice?

sarsnake
  • 26,667
  • 58
  • 180
  • 286

2 Answers2

1

There is nothing that a plugin does that would necessarily be faster than what you can write yourself.

That being said, the fastest way to do this for you would be to create a string of the HTML table rows (append each row to the string) and then to set the innerHTML to the string. Don't build the DOM nodes directly & append, that is the worst performance.

Source: http://www.quirksmode.org/dom/innerhtml.html

sioked
  • 226
  • 1
  • 4
  • Thanks, after a quick google, it turns out that the innerHtml is read-only in IE....so my alternative would be to create the entire table, place it inside the div and set that DIV's innerHtml? – sarsnake Dec 15 '10 at 18:13
  • 1
    Ugh, stupid IE. innerHTML is only read-only when it comes to table elements. I forgot about that one. If you can use jQuery, try $('#your_table').html(your_generated_html); I think that will use innerHTML when it can. Hopefully then it will take care of any browser inconsistencies. – sioked Dec 15 '10 at 18:28
  • so essentially, what slows the process down is the DOM node creation rather than appending strings...? – sarsnake Dec 15 '10 at 18:30
  • 1
    Exactly. Every time you touch the DOM you slow your program down. Limit the number of times you touch the DOM and you will get better performance. – sioked Dec 15 '10 at 18:34
1

Look at examples from the answer. In the example will be added 1000 lines to the grid and all work quickly.

It would be much better if you posted the prototype of your grid which you currently use. Moreover jqGrid support many scenarios for local and remote data and many ways of editing local and remote data. Do you choosed already one way or at least direction in which you want to go? If you plan to access remote backend server having database, more information is required. At least one need to know which technology you use on the server (ASP.NET MVC, WFC, ASMX web services, PHP, Java Servlet and so on).

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • I access the server using Web Service. I massage the data inside the web service. All I need to do on the client side is described in the body of the question. I would like to keep is simple - ie populate the table with data is pretty much all I need to do. What I am wondering is that is whether it's worth it for me to learn a brand new plugin, as I do have a limited amount of time to finish. – sarsnake Dec 15 '10 at 19:28
  • @gnomixa: If you want to fill the grid with the data from JavaScript objects, then the bast way is to use of `data` parameter of jqGrid like in the example http://www.ok-soft-gmbh.com/jqGrid/1000.htm. If you want to edit data with respect of web service see http://stackoverflow.com/questions/3917102/jqgrid-add-row-and-send-data-to-webservice-for-insert/3918615#3918615. To load data direct from web server see http://stackoverflow.com/questions/3161302/jqgrid-page-1-of-x-pager/3161542#3161542, http://stackoverflow.com/questions/3169408/jqgrid-setgridparam-datatypelocal/3170652#3170652. – Oleg Dec 15 '10 at 19:41
  • @gnomixa: I can repeat also one more time that you include your current code in your question. If you wrote about performance problems, that you should has already a working example. Posting of such example can explain much more as general advices. Probably you use some jqGrid features which makes all work slowly. If you has limited amount of time it could be speed up solving of your problems. – Oleg Dec 15 '10 at 19:46
  • I don't have a working example. I am simply asking what is the best way to achieve the fastest performance: manually with Jquery vs using a plugin. That's the whole point, Oleg, is that I don't want to spend the time learning a plugin if it can be achieved without it. So I don't have any jqGrid code yet. – sarsnake Dec 15 '10 at 20:17
  • 1
    @gnomixa: I recommend you to look at the source code of http://www.ok-soft-gmbh.com/jqGrid/1000paged.htm example and make jqGrid for your case. It is the simplest way to show a grid. – Oleg Dec 15 '10 at 20:29