Using Javascript / jQuery, what is the most elegant way to render a list into a table?

Question

I have an issue where I have an array of strings (that are image urls) coming back from an ajax callback and I need to render the images into a html table. The issue is that I don't know the length of the list of course but I need to render a table with 6 columns always. Is it better to build up the table ( and then fill in the cells or build up the table on the fly (loop through number of columns within each .each statements below). The second one seems more dynamic but not very elegant.

var tableHTML = [];
tableHTML.push("<table>");

$.each(data.ImageURLs, function(index, imageURL) {

    // create table content
    if (index % 1 == 0) {
        tableHTML.push("<tr>");
    }
    tableHTML.push("<td>" + imageURL + "</td>");

    if (index % 6 == 0) {
        tableHTML.push("</tr");
    }
});

tableHTML.push("</table>");
$("#myTable").html(tableHTML.join(""));

PS If the images are of same width, a responsive way was to use CSS3 and put it in 6 columns. @Ings: does it matter, string concatenation or array pushing? — mplungjan, Mar 16 '13 at 11:51
@mplungian they are the same size . . I need to support IE7 browser so i thought i can't really depent on CSS3 — leora, Mar 16 '13 at 11:52
With a shim you could. I am quite happily using it on all browsers, but have not been able to test it in IE7 — mplungjan, Mar 16 '13 at 11:53

charlietfl · Accepted Answer · 2013-03-16T13:34:55.047

What I normally do is create a helper function to pad the additional elements to last row if needed.

You can get the number needed by comparing number of items to modulus of items per row. I use slice to create each row of data

var items_per_row = 6;

var tableHTML = ['<table border="1">'];
var num_items = data.length;



for (j = 0; j < num_items; j = j + items_per_row) {
    var rowEnd = j + items_per_row;
    var rowData = data.slice(j, rowEnd);

    tableHTML.push('<tr>');
    $.each(rowData, function (idx, item) {
        tableHTML.push('<td>' + item + '</td>')
    });
    /* pad last row if needed */
    if (rowEnd > num_items) {
        tableHTML.push(emptyCells(num_items, items_per_row));
    }
    tableHTML.push('</tr>');

}


tableHTML.push("</table>");

function emptyCells(num_items, items_per_row) {
    var qty = items_per_row - (num_items % items_per_row);

    var cells = [];
    for (i = 0; i < qty; i++) {
        cells.push('<td class="empty">Empty</td>')
    }

    return cells.join('')
}

DEMO: http://jsfiddle.net/VTLBF/2

mplungjan · Answer 2 · 2013-03-16T12:10:23.950

0

Can you try this?

DEMO

https://code.google.com/p/html5shiv/

and this, using only <p>s

@media only screen and (min-width: 740px) {
  #multicolumn { 
    column-count:6; 
    column-gap: 10px; 

    -webkit-column-count: 6; 
    -webkit-column-gap: 10px;

    -moz-column-count: 6;
    -moz-column-gap: 10px;
  }      
  p:first-of-type {
    margin-top:0 !important;
  }
}

edited Mar 16 '13 at 12:10

answered Mar 16 '13 at 12:00

mplungjan

169,008
28
173
236

score 0 · Answer 3 · edited May 23 '17 at 12:28

0

I think a good way(maybe be the best) is to use templating plugin like jquery tmpl.

With using it you can draw an entire table or anything you want just by giving it an array or you can pass to is JSON with your data coming from server.

Kindly check these questions :

Can jQuery template bind to a raw array?

How do I render a jQuery.tmpl Template to a String?

and don't forget to check the jquery tmpl documentation for more information.

edited May 23 '17 at 12:28

Community

1
1

answered Mar 16 '13 at 12:03

ebram khalil

8,252
7
42
60

I find templating a huge overhead for such a small thing. Also it adds complexity rather than speed things up in my opinion – mplungjan Mar 16 '13 at 12:17
@mplungjan you are right .. i just want to offer new option and i think it's worth learning – ebram khalil Mar 16 '13 at 12:20

Using Javascript / jQuery, what is the most elegant way to render a list into a table?

3 Answers3