ajax reload table

netoczs

How do I prevent the column (Duration) from being updated when updating the table?
It has a timer on it
and every time ajax.reload is done
it is restarted
I would like this column not to be updated

var table = $("#liveCalls").DataTable({

'ajax': data.php,

 columns: [
            {
                data: '',
                title: 'Action',
                defaultContent: '',
                render: function (data, type, id) {
                    return '<button class="btn btn-pill btn-info">HangUp</button>'
                },
            },
             {
                data: 'account',
                title: 'Acoount'
                defaultContent: '',
            },

            {
                data: "duration",
                title: 'Duration'
                defaultContent: '',
                render: function (data, row, type, meta) {
                    let timerId = `timer-${meta.row}`;
                    setTimeout(() => {
                        startTimer(0, document.getElementById(timerId));
                    }, 0);
                    return `<span id="${timerId}">00:00</span>`;
                }
            },

 ]

});

function startTimer(duration, display) {
let timer = duration, minutes, seconds;
let interval = setInterval(() => {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;

            display.textContent = `${minutes}:${seconds}`;

            if (++timer < 0) {
                clearInterval(interval);
            }
        }, 1000);
    }

    setInterval(function () {
        table.ajax.reload();
    }, 5000)

kthorngren

Without knowing the details of your solution I'll give you some general ideas.

Instead of using ajax.reload() you will need to use jQuery ajax() to load the data. The success function is where the table will need to be updated.

Likely you will need to loop through the response data. Using a unique value from the response data find the corresponding Datatable row using row().data() with the row-selector as a function.

Update the appropriate the columns in the row data leaving the Duration column alone. Use cell().data() for the updates to not interfere with the Duration column.

After the loop completes use draw() to resort, etc the Datatable.

Here is a simple example not using Ajax:
https://live.datatables.net/wucaquce/1/edit

This suggestion may or may not work for your specific solution.

Kevin