Need help on table formatting

2019-08-06 09:27发布

站内问答 / JavaScript
1410 2 6

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();
    }

enter image description here

enter image description here

enter image description here

2条回答
对你真心纯属浪费
2楼-- · 2019-08-06 09:50

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>
查看更多
0人赞 添加讨论(0) 举报
The star\"
3楼-- · 2019-08-06 10:04

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)