Dynamically update a table using javascript

ajax, javascript, jquery

Solution

Here is the demo fiddle. (simple version) NEW: See the updated fiddle (advanced version).

Let's say you have this JSON data retrieved:

var jsonData = [
    { field1: 'value a1', field2: 'value a2', field3: 'value a3', field4: 'value a4' },
    { field1: 'value b1', field2: 'value b2', field3: 'value b3', field4: 'value b4' },
    { field1: 'value c1', field2: 'value c2', field3: 'value c3', field4: 'value c4' }
];

And you have this table:

<table id="data-table">
    <tr><td>There are no items...</td></tr>
</table>

Now, you need a method that can parse the values in a customisable order and presence. For example, if you can pass a field array to the parser function; you can set the order of the fields and leave out a field or two if you want to:

loadTable('data-table', ['field1', 'field2', 'field3'], jsonData);

Notice that `field4` is not parsed.

The `loadTable` function loops through the items of the returned array and create a `<tr>` with each field value inside a `<td>`. Here is the simple function:

function loadTable(tableId, fields, data) {
    //$('#' + tableId).empty(); //not really necessary
    var rows = '';
    $.each(data, function(index, item) {
        var row = '<tr>';
        $.each(fields, function(index, field) {
            row += '<td>' + item[field+''] + '</td>';
        });
        rows += row + '<tr>';
    });
    $('#' + tableId).html(rows);
}

UPDATE:

Added support for:

- Table headers

- Default text (for empty list)

- Appending lists

- Clearing the table

- etc...

You can now simply include an empty table and the `dynamicTable` will take care of the rest:

<table id="data-table"></table>

Call the `dynamicTable.config()` method to configure the table:

var dt = dynamicTable.config('data-table', //id of the table
                             ['field2', 'field1', 'field3'], //field names
                             ['header 1', 'header 2', 'header 3'], //set to null for field names to be used as header names instead of custom headers
                             'There are no items to list...'); //default text for no items

Then call `dt.load(data);` to load new data (removes the previous list if there is one), OR call `dt.load(data, true);` to append the new data at the end of the previous list.

Calling `dt.clear();` method will clear the whole list.

Updated fiddle here.

Problem

Original source