Category: How do I do X?


This solution is summarized from an archived support forum post. This information may have changed. If you notice an error, please let us know in Discord.

Display the value of updated row without reloading the entire table data


As a user, I have a table with buttons in each row. When I click a button, I want to change the value of a specific field in that row without having to reload the entire table to see the update. Is this possible?


To achieve the desired result, you can disable the animate loading property so that the updated value is displayed without reloading the entire table. This can save time and resources, and provide a smoother user experience.

For example, if you have a table with rows and buttons to update the values in a particular column, you can use JavaScript to handle the button click and update the field value for that row. Once the value has been updated, you can use jQuery or another library to select the corresponding table cell and update its contents.

Here is an example JavaScript function that updates the value of a cell in the table:

function updateCellValue(rowId, colId, value) {  var cell = document.getElementById(rowId).querySelector('td[data-col="' + colId + '"]');  cell.textContent = value;}

To use this function, you would need to pass in the ID of the row, the ID of the column (which should be set using a data attribute), and the new value to be displayed.

In addition to updating the value of the cell, you can also use CSS to add a visual indicator that the value has changed, such as a highlight or animation.

Overall, by disabling the animate loading property and using JavaScript and jQuery to update the table cells dynamically, you can provide a more responsive and efficient user interface for your table-based applications.