0

I am a very visual programmer/designer, and I developed a mini-framework for my projects for displaying data from PHP output.

Basically I design my page and desginate div and li blocks to be looped and displayed using my IDE, Dreamweaver. I simply do a string replace routine on the target div/li elements using Javascript to generate the content. I guess you can say my design visually is the template itself. It's so much easier to do changes: before, I'd design it then copy and paste the HTML code for the block to be looped into PHP, and there I do the value filling.

So basically my PHP script outputs an object and my Javascript function does the magic and generates (appends to an element) as needed..

This has worked perfectly until I started handling huge amounts of table data (around 2000 rows). I notice the browser pausing for a bit while it tries to generate the content, and that's on a desktop - I'd imagine how much slower it can be when my page is ran on a mobile device.

This got me thinking, should i go back to generating content in the backend and do a simple output on the JS/browser side? I liked manipulating rows of data in JS already, and it's much more visually convenient to keep all the template code on the page, as is, where is, and have Javascript just pick it up and use it to generate content. I'd hate going back to having PHP generate the actual html code.

What would you recommend in this situation?

P.S.: For those who want to suggest cutting down data limiting display: in this case I can't. I have to show all returned rows without paginations. I have my reasons/requirements.

Wander Nauta
  • 18,832
  • 1
  • 45
  • 62
BrownChiLD
  • 3,545
  • 9
  • 43
  • 61

1 Answers1

1

simple Implementation of underscore.js

<table class="outer">
<thead>
    <tr>
        <th>Id</th>
        <th>Name</th>
    </tr>
</thead>
<tbody>
</tbody>


<div class="outer">

<div class="th">Id</div>
<div class="th">Name</div>

<p>&nbsp;</p>
</div>
<script type="text/html" id='table-data'>

<% _.each(items,function(item,key,list){ %>
    <tr>
        <td><%= key %></td>
        <td><%= item.name %></td>
    </tr>
<% }) %></script>
<script type="text/html" id='div-data'>

<% _.each(items,function(item,key,list){ %>
    <div><%= key %></div>
    <div><%= item.name %></div>
<% }) %></script>

fetch data and populate

var items = [
{name:"Nick"},
{name:"Lee"},
{name:"Jenny"},
{name:"Julie"},
{name:"Dennis"},
{name:"Shawn"},
{name:"Justin"},
{name:"Scott"},
{name:"John"},
{name:"Sherell"},
{name:"Janie"},
{name:"Graham"},
{name:"Erica"}]

var tableTemplate = $("#table-data").html(),
divTemplate = $("#div-data").html();
$("table.outer tbody").html(_.template(tableTemplate,{items:items}));
$("div.outer p").before(_.template(divTemplate,{items:items}));
Akilan
  • 924
  • 1
  • 7
  • 19
  • thanks hmm.. this is still a looping solution. and i dont think it is any faster than what i currently have now.. if i am to use this i might as well stick w/ what i have already w/c is a much simplier and more design stage friendly (Where my actual table to repeat is already on the page w/ keywords that my function will replace w/ data) Anywho i have done some reading, i believe generating html output is best done on the php/server.. specially w/ the advent of mobile devices w/ limited computing power. – BrownChiLD Apr 29 '13 at 04:47
  • 1
    actually in above program u r not doing any costlier operation like creating and adding elements.so u can see vast difference.i'm using this to show bulk data without any lag – Akilan Apr 29 '13 at 13:02
  • i see your point.. i tweaked my code to do something like that (does the actual elem prepend after the whole loop) .. and it did seem to perform a bit better.. but still sluggish since i have to do a lot of string replacement routines w/in the loop.. i am now thinking of sending the html template to the php script and php can do the html output there.. but the impact is bigger bytes of data being sent to and from the php script ;( – BrownChiLD Apr 30 '13 at 05:46