0

I need to dynamically build an HTML table given a certain query method. It doesn't seem too complex and I figure there must be a quick way of doing this.

The query method: Given x amount of data sources, I can query each one, one after the other, for a given time period and get timestamps:values for matching records in that time period. The queries happen one after the other so I have to build an HTML table out of them one by one.

My idea: build it out one by one to look something like this: 

<table>
    <th>
        timestamp
    </th>
    <th>
        source 1
    </th>
    <th>
        source 2
    </th>
    <th>
        source 3
    </th>
    <tr>
        <td>
            timestamp 1
        </td>
        <td>
            source 1 value 1
        </td>
    </tr>
    <tr>
        <td>
            timestamp 2
        </td>
        <td>
            source 1 value 2
        </td>
    </tr>
    <tr>
        <td>
            timestamp 3
        </td>
        <td>
            source 1 value 3
        </td>
    </tr>
    <tr>
        <td>
            timestamp 1
        </td>
        <td>
        </td>
        <td>
            source 2 value 1
        </td>
    </tr>
    <tr>
        <td>
            timestamp 2
        </td>
        <td>
        </td>
        <td>
            source 2 value 2
        </td>
    </tr>
    <tr>
        <td>
            timestamp 3
        </td>
        <td>
        </td>
        <td>
            source 2 value 3
        </td>
    </tr>
    <tr>
        <td>
            timestamp 1
        </td>
        <td>
        </td>
        <td></td>
        <td>
            source 3 value 1
        </td>
    </tr>
    <tr>
        <td>
            timestamp 2
        </td>
        <td>
        </td>
        <td></td>
        <td>
            source 3 value 2
        </td>
    </tr>
    <tr>
        <td>
            timestamp 3
        </td>
        <td>
        </td>
        <td></td>
        <td>
            source 3 value 3
        </td>
    </tr>
</table>

Check this fiddle for a good visual: http://jsfiddle.net/ac0o2715/2/

Then sort that table by timestamp using something like this: http://jsfiddle.net/qNwDe/417/ (from this StackExchange thread: Sort a table fast by its first column with Javascript or jQuery )

Then combine by identical timestamp columns using some efficient method that I cannot think of unfortunately, however I feel should not be very difficult since there should be no conflicting columns when combining.

OR, maybe this entire strategy is inefficient, I just couldn't think of a quick way of inserting new rows into the current table sorted by timestamp (and also combining them on identical timestamp) while iterating through the queried data. It seems like it would be faster to dump them all in first and then do one sorting function and merge.

This project is using jQuery, so Javascript and/or jQuery solutions are just fine.

Community
  • 1
  • 1
addMitt
  • 951
  • 2
  • 13
  • 27
  • 4
    Hint: Don't think about the HTML until last. Create a model of the data in JavaScript (using an array of objects). Add/filter/sort that array of objects, and then just use JS to loop over your array and spit out the appropriate HTML around it. – Adam Jenkins Mar 02 '15 at 18:03
  • possible duplicate of [Javascript Effectively Build Table From JSON and Add It to DOM](http://stackoverflow.com/questions/8734786/javascript-effectively-build-table-from-json-and-add-it-to-dom) I really like Emre Ekan's answer there. You can either build everything up into a single JSON object first, or add the rows dynamically as your records return. – krillgar Mar 02 '15 at 18:09
  • Definitely a better strategy so far for manipulating the data before updating the DOM. What I'm still having trouble with is building that data set efficiently. Even if I dump them all and sort by timestamp, efficiently merging by a specified key (the timestamp) is proving difficult for me to find efficient answers. – addMitt Mar 03 '15 at 15:43

0 Answers0