Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
jQuery groupBy => HTML

groupBy => HTML

jsFiddle Example

Takes an object with the format key => list and a list of keys to exclude from the table. Returns an array of groups. The keys should be the ones used as the iterator or by the iterator when performing the group by to prevent redundancy of data in the output table.

Since JavaScript object keys can only be numbers or strings, if the data was grouped by multiple keys, the group key must be a string delimited by some value. By default, the separator is a comma ,.

groupByHTML(groups, keys[, sep])

The resulting group HTML follows this markup:

<div class=group>
    <div class=group-label>
        <span class=group-key></span>
        <!-- ... rest of group keys -->
    </div>
    <table class=group-table>
        <thead>
            <tr>
                <th></th>
                <!-- ... rest of non-grouped column names -->
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <!-- ... rest of column values -->
            </tr>
            <!-- ... rest of rows -->
        </tbody>
    </table>
</div>
groupByHtml = (groups, keys, sep) ->
html = []
sep = sep or ","
_.each groups, (list, groupKey) ->
group = $("<div>").addClass("group")
label = $("<span>").addClass("group-label")
table = $("<table>").addClass("group-table")
header = $("<tr>")
tbody = $("<tbody>")
if _.isString(groupKey)
_.each groupKey.split(sep), (tok) ->
label.append "<span class=group-key>" + $.trim(tok) + "</span>"
else
label.append "<span class=group-key>" + groupKey + "</span>"
_.each list, (obj, i) ->
tr = $("<tr>")
_.each obj, (value, key) ->
if keys.indexOf(key) >= 0
i is 0
else
header.append "<th>" + key + "</th>" if i is 0
tr.append "<td>" + value + "</td>"
tbody.append tr
$("<thead>").appendTo(table).append header
table.append tbody
group.append label, table
html.push group
return html
function groupByHtml(groups, keys, sep) {
var html = [],
sep = sep || ',';
// Build group
_.each(groups, function(list, groupKey) {
var group = $('<div>').addClass('group'),
label = $('<span>').addClass('group-label'),
table = $('<table>').addClass('group-table'),
header = $('<tr>'),
tbody = $('<tbody>');
if (_.isString(groupKey)) {
_.each(groupKey.split(sep), function(tok) {
label.append('<span class=group-key>' + $.trim(tok) + '</span>');
});
} else {
label.append('<span class=group-key>' + groupKey + '</span>');
}
// Build table
_.each(list, function(obj, i) {
var tr = $('<tr>');
_.each(obj, function(value, key) {
// Add group label on first iteration
if (keys.indexOf(key) >= 0) {
if (i == 0) {
}
} else {
// Add head row on first iteration
if (i == 0) {
header.append('<th>' + key + '</th>');
}
tr.append('<td>' + value + '</td>');
}
});
tbody.append(tr);
});
$('<thead>').appendTo(table).append(header);
table.append(tbody);
group.append(label, table);
html.push(group);
});
return html;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment