Wie Daten in einer Tabelle ohne Aktualisierung HTML-Seite (mit nodejs & mysql ajax) anzuzeigen

Question

Ich versuche, Daten aus mysql-Tabelle zu meiner HTML-Seite mit Nodejs & Express.

I NodeJS bin mit & express und wollen Daten aus MySQL-Tabelle zu einer HTML-Seite Tabelle aufzulisten einen Ajax-Aufruf mit, so dass die Seite nicht aktualisiert wird, wenn ein neues Element hinzugefügt wird. Momentan zeige ich Ergebnisse direkt unter Verwendung der ausdrücklichen Syntax an und arbeite tadellos zusammen mit Datatable.

meine Tabelle tabellenname-metrics_list Daten in MySQL ist wie -

id | Metriken | custom_metrics

1 | abcd | abcd 

2 | abcd | abcd 

3 | abcd | abcd 

Mein Server-Seite js Code ist als folgt-

router.get('/', function(req, res) { 
    try { 
     sess = req.session; 
     if (sess.user != req.session.id) { 
      console.log('SESSION EXPRED'); 
      res.redirect('/'); 
     } else { 
      console.log('******LISTING FOR PORTAL'); 
      connection.query('SELECT * FROM metrics', function(err, data) { 
       if (err) { 
        console.log("## Error in Portal ##"); 

       } else { 
        console.log("DATA " + JSON.stringify(data)); 
        res.render('metrics-list', { 
         metricsList: data 
        }); 
       } 
      }); 
     } 
    } catch (ex) { 
     console.log("Exception : " + ex); 
    } 
}); 

Meine HTML-Tabelle Code ist:

<table cellpadding="0" cellspacing="0" border="0" width="100%" class="table table-striped table-bordered dataTable no-footer" id="basic-datatable" role="grid" aria-describedby="basic-datatable_info"> 
          <thead> 
           <tr role="row"> 
            <th class="sorting_asc" tabindex="0" aria-controls="basic-datatable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending" style="width: 40px;">Sr No</th> 
            <th class="sorting" tabindex="0" aria-controls="basic-datatable" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending" style="width: 80px;">Group</th> 
            <th class="sorting" tabindex="0" aria-controls="basic-datatable" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending" style="width: 80px;">Actions</th>                  
           </tr> 
          </thead> 
          <tbody> 
           <%for(var j=0;j<metricsList.length;j++){%> 
            <% if(metricsList[j].custom_metrics == '' || metricsList[j].custom_metrics == null) { %> 

            <% } else { %> 
            <tr class="gradeA odd" role="row"> 
              <td class="sorting_1"><%=j+1%></td> 

              <td ><%=metricsList[j].custom_metrics %></td> 

              <td style="text-align: center;"> <a href="/metrics/delete?id=<%=metricsList[j].id%>" onclick="return confirm('Are you sure you want to delete this item?');"> 
                 <i class="glyphicon glyphicon-trash" ></i></a> </td>         
            </tr>          
            <% } %> 

           <%}%> 
          </tbody> 
         </table> 
       <!-- TABLE END --> 

ich, um herauszufinden, wollen, wie die zur Liste Tabelle, die Ajax verwendet, so dass, wenn Daten in MySQL hinzugefügt werden, es sofort in der Liste angezeigt wird, ohne dass die gesamte HTML-Seite r ist ausgearbeitet.

Answer 1

Sie könnten den vorhandenen tbody-Inhalt entfernen und dann mit jQuery im jQuery AJAX-Callback erneut rendern. So etwas wie ..

success: function (result) {  
    $('tbody').empty(); 
    for (var data in result) { 
     $('tbody').append('<tr class="gradeA odd" role="row"><td style="word-break: break-all;">data.custom_metrics</td></tr>'); 
    } 
})