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 gets displayed , now when the user provides the credentials and clicks on the login button, it connects to the database and writes the data to the table div element, but the results are not displayed in the same look and feel just like the previous two pages

How can i ensure the table results are displayed in the same area/look and feel as in the first two pages ?

<head>
        <meta charset="UTF-8">
        <title>index</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
        <link rel="shortcut icon" href="images/favicon.png">
        <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
        <link rel="stylesheet" href="css/main.css">
        <script>window.$ = window.jQuery = WLJQ;</script>
    </head>

<body style="display: none;">

    <div id="AppBody">  
            <div class="header">
                <h1>Custom Login Module</h1>
            </div>  

            <div class="wrapper1">
                <input type="button" value="Login" onclick="getSecretData()" />
                <input type="button" value="Logout" onclick="WL.Client.logout('CustomAuthenticatorRealm',{onSuccess: WL.Client.reloadApp})" />
            </div>
        </div>

        <div id="AuthBody" style="display: none">

            <div id="loginForm">
                Username:<br/>
                <input type="text" id="usernameInputField" /><br />
                Password:<br/>
                <input type="password" id="passwordInputField" /><br/>      
                <input type="button" id="loginButton" value="Login" />
                <input type="button" id="cancelButton" value="Cancel" />
            </div>
     </div>     

     <div id="ResTable"  style="display: none">

        <div class="header">
        My Dispute List 
        </div>

        <div class="wrapper"> 

    <table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow"  id="mytable">
        <thead>

           <tr id="loadChat">
              <th data-priority="1">Dispute Number</th>
              <th data-priority="2">Status</th>
              <th data-priority="3">Start Date</th>
              <th data-priority="4">Customer Name</th>
              <th data-priority="5">DRO</th>
              <th data-priority="6">Dispute Manager</th>

           </tr>
        </thead>
        </table>
        </div>
    </div>

java script code that writes the data to table

var mytabledata = "<table><tr><th> DISPUTE NUMBER </th>" + "<th>DISPUTE STATUS    </th>" + "<th>START DATE </th>" + "<th>CUSTOMER NAME </th>" + "<th>     DRO      </th>" + "<th>DISPUTE MANAGER   </th>";

if (result.invocationResult.resultSet.length > 0) {
    for (var j = 0; j < result.invocationResult.resultSet.length; j++) {
        var row = $("<tr />");
        row.append($("<td>" + result.invocationResult.resultSet[j].DISP_NUMBER + "</td>"));
        row.append($("<td>" + result.invocationResult.resultSet[j].DISP_STATUS + "</td>"));
        row.append($("<td>" + result.invocationResult.resultSet[j].DISP_CREATE_DATE + "</td>"));
        row.append($("<td>" + result.invocationResult.resultSet[j].CUST_CONT_NAME + "</td>"));
        row.append($("<td>" + result.invocationResult.resultSet[j].DISP_RES_OWNER + "</td>"));
        row.append($("<td>" + result.invocationResult.resultSet[j].DISP_MANAGER + "</td>"));
        $("#loadChat").append(row);
        $('#AppBody').hide();
        $('#AuthBody').hide();
        $('#ResTable').show();
    }

回答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>

       <tr id="loadChat">
          <th data-priority="1">Dispute Number</th>
          <th data-priority="2">Status</th>
          <th data-priority="3">Start Date</th>
          <th data-priority="4">Customer Name</th>
          <th data-priority="5">DRO</th>
          <th data-priority="6">Dispute Manager</th>

       </tr>
    </thead>
    <tbody>
        <!-- database result would be here -->
    </tbody>
    </table>

回答2:

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

<table data-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

来源：https://stackoverflow.com/questions/25346522/need-help-on-table-formatting

标签

javascript

jquery-mobile

ibm-mobilefirst