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, Oct 03 '16 at 14:13

score 2 · Answer 1 · edited Oct 03 '16 at 14:03

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 03 '16 at 14:03

Vinayak Iyer

53
1
1
10

answered Oct 01 '16 at 21:25

BrTkCa

4,703
3
24
45

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

1 Answers1