Need Help On Table Formatting

I have the following code in index.html. When this page is executed, a page is displayed with login & logout buttons, when the user clicks on login another page div=AuthBody g

Solution 1:

It looks like Your code is adding broken HTML code into thead which should not contain each result data but title of each elements.

try this

for (var j = 0; j < result.invocationResult.resultSet.length; j++) {
    var tmp = "<tr>";
    var resSet = result.invocationResult.resultSet[j];
    for(res in resSet){
        tmp += "<td>" + resSet[res] + "</td>";
    }
    $("#mytable > tbody").append(tmp+"</tr>");
}

and in HTML

<thead><trid="loadChat"><thdata-priority="1">Dispute Number</th><thdata-priority="2">Status</th><thdata-priority="3">Start Date</th><thdata-priority="4">Customer Name</th><thdata-priority="5">DRO</th><thdata-priority="6">Dispute Manager</th></tr></thead><tbody><!-- database result would be here --></tbody></table>

Solution 2:

Basic structure of jQuery Mobile table widget is as follow. You have missed tbody part.

<tabledata-role="table"data-mode="columntoggle"id="mytable"><thead><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><tr></thead><tbody><tr><th>info 1</th><th>info 1</th><th>info 1</th><tr><tr><th>info 2</th><th>info 2</th><th>info 2</th><tr></tbody></table>

Moreover, when you update table's details dynamically, you need to rebuild the table.

$("#mytable").table("rebuild");

An example of a dynamic table.

var data = [{
    "DISP_NUMBER": "1",
        "DISP_STATUS": "online",
        "DISP_CREATE_DATE": "01/02/2014",
        "name": "John"
}, {
    "DISP_NUMBER": "2",
        "DISP_STATUS": "offline",
        "DISP_CREATE_DATE": "10/05/2014",
        "name": "Dao"

}, {
    "DISP_NUMBER": "3",
        "DISP_STATUS": "offline",
        "DISP_CREATE_DATE": "10/05/2014",
        "name": "Anonymous"
}];

$.each(data, function (i, value) {
    var row = $("<tr />");
    row.append($("<th>" + value.DISP_NUMBER + "</th>"));
    row.append($("<td>" + value.DISP_STATUS + "</td>"));
    row.append($("<td>" + value.DISP_CREATE_DATE + "</td>"));
    row.append($("<td>" + value.name + "</td>"));

    /* append to tobody */
    $("#mytable tbody").append(row);
});

/* rebuild table and column-toggle */ 
$("#mytable").table("rebuild");

Demo