updating a table using jquery

Question

There is something im not seeing in this script I wrote, i want to update/redraw a table inside a DIV. I wrote this:

<div id="e-table">
    ...
</div>

<script>

    var tableHeader = '<table class=\"table table-striped\"><thead><tr><th>Date</th><th>Type</th><th>Information</th></tr></thead><tbody>';
    var tableFooter = '</tbody></table>';
    var table = $("#e-table");

    function updateEvents() {
        $.ajax({
            url: "/monitor/ajaxEvents",
            dataType: "json"
        }).done(function(data) {
                refreshTable(data);
        });
    }

    function refreshTable(data) {
        table.html(tableHeader);
        $.each(data, function(i, item) {
            table.append("<tr><td>" + item.date + "</td><td>" + item.type + "</td><td>" + "FOO" + "</td></tr>");
        });
        table.append(tableFooter);
    }


    updateEvents();
</script>

I save the table part that is constant to tableHeader and tableFooter, the in a cycle I append the TD elements, but this is script is outputting something strange:

<div id="e-table">
   <table class="table table-striped">
      <thead>
         <tr>
            <th>Date</th>
            <th>Type</th>
            <th>Information</th>
         </tr>
      </thead>
      <tbody></tbody>
   </table>
   <tr>
      <td>2014-07-03 12:12:00</td>
      <td>withdrawal</td>
      <td>FOO</td>
   </tr>
   <tr>
      <td>2014-07-03 12:12:00</td>
      <td>general</td>
      <td>FOO</td>
   </tr>
   <tr>
      <td>2014-07-03 12:11:58</td>
      <td>withdrawal</td>
      <td>FOO</td>
   </tr>
   <tr>
      <td>2014-07-03 12:11:58</td>
      <td>general</td>
      <td>FOO</td>
   </tr>
   <tr>
      <td>2014-07-03 11:33:43</td>
      <td>withdrawal</td>
      <td>FOO</td>
   </tr>
   <tr>
      <td>2014-07-03 11:33:43</td>
      <td>general</td>
      <td>FOO</td>
   </tr>
   <tr>
      <td>2014-07-03 11:33:42</td>
      <td>withdrawal</td>
      <td>FOO</td>
   </tr>
   <tr>
      <td>2014-07-03 11:33:42</td>
      <td>general</td>
      <td>FOO</td>
   </tr>
</div>

I dont get it, why is the tableFooter getting printed before the elements???

Answer 1

.append() won't work like normal string concatenation,

Do like this,

function refreshTable(data) {

 $.each(data, function(i, item) {
    tableHeader += "<tr><td>" + item.date + "</td><td>" + item.type + "</td><td>" + "FOO" + "</td></tr>"
 });

 tableHeader += tableFooter
 table.html(tableHeader);
}

Answer 2

You're using jQuery to assign the 'Div' element with the id = 'e-table' to a variable named, 'table'. Thus, you are appending to the 'Div' element. Here's what you need to do, if you're going to use jQuery...

**side note: Your 'refreshTable' method is not actually clearing out the contents when you do it the correct way like this. You'll have to clear all the child elements if you truly wish to empty the table before repopulating.

var table = $('<table></table'); 
var tableHeader = $('<th></th>')
                        .append($('<tr></tr>')
                               .append($('<th></th>').html('Date'))
                               .append($('<th></th>').html('Information'))); 
var tableBody = $('<tbody></tbody>');


function updateEvents() {
    $.ajax({
        url: "/monitor/ajaxEvents",
        dataType: "json"
    }).done(function(data) {
            refreshTable(data);
    });
}

function refreshTable(data) {
    table.append(tableBody);
    table.append(tableHeader);
    $.each(data, function(i, item) {
        tableBody.append("<tr><td>" + item.date + "</td><td>" + item.type + "</td><td>" + "FOO" + "</td></tr>");
    });
}


updateEvents();

Answer 3

Where you declare

var table = $("#e-table");

you're actually getting a reference to the object, so when you .append to it, you're appending to that element, not to it's child.

There's a few ways around this, one would be to give the tbody an id of its own, eg

var tableHeader = '<table class=\"table table-striped\"><thead><tr><th>Date</th><th>Type</th><th>Information</th></tr></thead><tbody id=\"tableBody\">';
    var tableFooter = '</tbody></table>';

and then get that object reference instead

var table = $("#tableBody");

(some tidy up probably an idea here too, but hopefully you get the essential idea)