How to Display data on a table without refreshing html page (using nodejs & mysql ajax)

Question

I am trying to list data from mysql table to my html page using nodejs & express.

I am using nodejs & express and want to list data from mysql table to an html page table using an ajax call so that the page is not refreshed when a new item is added. Currently, I am directly displaying results using express syntax and is working perfectly along with datatable.

my table tablename-metrics_list data in mysql is like -

id | metrics | custom_metrics

1  | abcd    | abcd

2  | abcd    | abcd

3  | abcd    | abcd

My Server side js code is as follows-

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

My HTML table code is:

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

I want to figure out how to list the table using ajax, so that when data is added in mysql, it is immediately displayed on the list without the entire html page being refreshed.

You mean something like websockets ? From your problem statement it looks more like a socket connection than ajax. If you used ajax, you would use long polling which is a costly affair :) — Pramod Solanky
– Pramod Solanky, Commented Oct 3, 2016 at 14:13

Vinayak Iyer · Accepted Answer · 2016-10-03 14:03:35Z

2

You could remove the existing tbody content, and then re-render using jQuery in the jQuery AJAX callback. Something like..

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

edited Oct 3, 2016 at 14:03

Vinayak Iyer

531 gold badge1 silver badge10 bronze badges

answered Oct 1, 2016 at 21:25

BrTkCa

4,7894 gold badges28 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to Display data on a table without refreshing html page (using nodejs & mysql ajax)

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related