update table with new values using jquery

Question

I am trying to create an updating table which gets data using ajax call from the server. if there is any change in the data it will send the data to the web page. I have set the ids of the table dynamically using the id of the device.

this is my table

<table id="slave">
    <thead>
        <tr>
            <th>slave name</th>
            <th>slave id</th>
            <th>type</th>
            <th>Status</th>
            <th>value</th>
            <th>mode</th>
            <th>name1</th>
            <th>name2</th>
            <th>name3</th>
            <th>name4</th>
            <th>s1</th>
            <th>s2</th>
            <th>s3</th>
            <th>s4</th>
            <th>voltage</th>
            <th>temperature</th>
            <th>humidity</th>
        </tr>
    </thead>
    <tbody>
        <tr id="3">
            <td id="name"> IPL Conf Room Door </td>
            <td id="slave_id"> 3 </td>
            <td id="type"> door_sensor </td>
            <td id="status">
                <div class="led-green"></div>
            </td>
            <td id="value">
                <div class="led-blue"></div>
            </td>
            <td id="mode">0</td>
            <td id="name1">0</td>
            <td id="name2">0</td>
            <td id="name3">0</td>
            <td id="name4">0</td>
            <td id="s1">0</td>
            <td id="s2">0</td>
            <td id="s3">0</td>
            <td id="s4">0</td>
            <td id="voltage"> 2 </td>
            <td id="temp">0</td>
            <td id="hum">0</td>
        </tr>
        <tr id="4">
            <td id="name"> IPL Motion Sensor </td>
            <td id="slave_id"> 4 </td>
            <td id="type"> PIR </td>
            <td id="status">
                <div class="led-green"></div>
            </td>
            <td id="value">
                <div class="led-blue"></div>
            </td>
            <td id="mode">0</td>
            <td id="name1">0</td>
            <td id="name2">0</td>
            <td id="name3">0</td>
            <td id="name4">0</td>
            <td id="s1">0</td>
            <td id="s2">0</td>
            <td id="s3">0</td>
            <td id="s4">0</td>
            <td id="voltage"> 2 </td>
            <td id="temp">0</td>
            <td id="hum">0</td>
        </tr>
        <tr id="5">
            <td id="name"> IPL Conf Room Extension </td>
            <td id="slave_id"> 5 </td>
            <td id="type"> ir_relay </td>
            <td id="status">
                <div class="led-green"></div>
            </td>
            <td id="value">
                <div class="led-blue"></div>
            </td>
            <td id="mode">0</td>
            <td id="name1">0</td>
            <td id="name2">0</td>
            <td id="name3">0</td>
            <td id="name4">0</td>
            <td id="s1">0</td>
            <td id="s2">0</td>
            <td id="s3">0</td>
            <td id="s4">0</td>
            <td id="voltage"> 10 </td>
            <td id="temp"> 21 </td>
            <td id="hum"> 83 </td>
        </tr>
        <tr id="6">
            <td id="name"> IPL Scene Switch </td>
            <td id="slave_id"> 6 </td>
            <td id="type"> macro_panel </td>
            <td id="status">
                <div class="led-green"></div>
            </td>
            <td id="value">
                <div class="led-blue"></div>
            </td>
            <td id="mode"> 4 </td>
            <td id="name1">0</td>
            <td id="name2">0</td>
            <td id="name3">0</td>
            <td id="name4">0</td>
            <td id="s1">0</td>
            <td id="s2">0</td>
            <td id="s3">0</td>
            <td id="s4">0</td>
            <td id="voltage"> 0 </td>
            <td id="temp">0</td>
            <td id="hum">0</td>
        </tr>
        <tr id="7">
            <td id="name"> IPL Conf Lights </td>
            <td id="slave_id"> 7 </td>
            <td id="type"> fb </td>
            <td id="status">
                <div class="led-green"></div>
            </td>
            <td id="value">
                <div class="led-blue"></div>
            </td>
            <td id="mode"> 3 </td>
            <td id="name1"> </td>
            <td id="name2"> </td>
            <td id="name3"> </td>
            <td id="name4">0</td>
            <td id="s1"> 0 </td>
            <td id="s2"> 0 </td>
            <td id="s3"> 0 </td>
            <td id="s4">0</td>
            <td id="voltage">0</td>
            <td id="temp">0</td>
            <td id="hum">0</td>
        </tr>
        <tr id="9">
            <td id="name"> IPL Reception Extension </td>
            <td id="slave_id"> 9 </td>
            <td id="type"> ir_relay </td>
            <td id="status">
                <div class="led-green"></div>
            </td>
            <td id="value">
                <div class="led-blue"></div>
            </td>
            <td id="mode">0</td>
            <td id="name1">0</td>
            <td id="name2">0</td>
            <td id="name3">0</td>
            <td id="name4">0</td>
            <td id="s1">0</td>
            <td id="s2">0</td>
            <td id="s3">0</td>
            <td id="s4">0</td>
            <td id="voltage"> 10 </td>
            <td id="temp"> 23 </td>
            <td id="hum"> 85 </td>
        </tr>
        <tr id="10">
            <td id="name"> IPL Main Door </td>
            <td id="slave_id"> 10 </td>
            <td id="type"> door_sensor </td>
            <td id="status">
                <div class="led-green"></div>
            </td>
            <td id="value">
                <div class="led-yellow"></div>
            </td>
            <td id="mode">0</td>
            <td id="name1">0</td>
            <td id="name2">0</td>
            <td id="name3">0</td>
            <td id="name4">0</td>
            <td id="s1">0</td>
            <td id="s2">0</td>
            <td id="s3">0</td>
            <td id="s4">0</td>
            <td id="voltage"> 2 </td>
            <td id="temp">0</td>
            <td id="hum">0</td>
        </tr>
    </tbody>
</table>

The row ids are set with the device_id.

This is my ajax call

function updateDatTable() {

    fetch('{{route('
            pusher ')}}', {
                method: 'post',
                mode: 'cors',
                headers: {
                    'Content-Type': 'application/json', // sent request
                    'Accept': 'application/json' // expected data sent back
                },
                body: JSON.stringify({ "mac": "{{$slaves['mac']}}" })
            })
        .then((res) => res.json())
        .then(function(res) {
            if (res['message'] == "no Change") {
                //alert(JSON.stringify(res));
            } else {
                alert(JSON.stringify(res)); // logic to update cell data goes here.
            }
            setTimeout(updateDatTable, 3000);
        })
        .catch(function(error) {
            alert(error);
            setTimeout(updateDatTable, 3000); // <-- there was a network problem, 
            //     but still, program the next one!
        })

}

If there is any change the data would be structured as followed.

res['array_key (starts from zero)']['td_id'];

If we need to find the slave_id to find the id we can get it by checking

res['array_key (starts from zero)']['slave_id'];

this array would have the value that is to be updated. I just need some help in jquery or javascript to change table cell data. I am not a front-end person. Thank you.

You can use jquery's `.remove()` function to remove existing rows/cols and `.append()` to add new rows and cols. — Sayed, Mar 15 '19 at 07:05
The sample table shared above is faulty. You're using same ID on multiple `td`. Please correct that and I'll be happy to help. — Sayed, Mar 15 '19 at 07:13
You can use server side editable datatable for this. Check this link if it helps to you: https://editor.datatables.net/examples/inline-editing/serverSide.html — Rohit Mittal, Mar 15 '19 at 07:14
@Sayed you can assume that the id of each is unique (the present id concatenated with the slave_id ). — Zain Samin, Mar 15 '19 at 07:21
Welcome to SO. Kindly read [mcve] and modify your question to remove all unnecessary stuff so that you can get more answers. e.g. All ajax stuff is unnecessary in your question. If I understood it correctly you just want to dynamically update your table based on res object. You can add sample res object in your question for clarity. — Abdul Rauf, Mar 15 '19 at 08:14
You can just iterate on your object depending on your logic and update innerHtml of dom nodes using `$("#").html("Text you want to replace");` Reference: https://stackoverflow.com/a/1309454/2073920 — Abdul Rauf, Mar 15 '19 at 08:22

Abdul Rauf · Accepted Answer · 2019-03-15T10:14:55.243

2

You can just iterate on res object depending on your logic and update innerHtml of dom nodes using $("#<yourIdHere>").html("Text you want to replace");

Reference: https://stackoverflow.com/a/1309454/2073920

edited Mar 15 '19 at 10:14

answered Mar 15 '19 at 10:08

Abdul Rauf

5,798
5
50
70

update table with new values using jquery

1 Answers1