How to reload Thymeleaf table without reloding page?

Question

Below is my HTML and JavaScript code,I am using Thyme-leaf to display table content dynamically. As you can see if notified value is 1 , change button is disabled and its CSS changed. But when its value is something else user can click on that button. Once user click on button worksomething() function is called. Now what i want if user get success response ,without reloading the page , button attached to selected ID should be disabled and it's CSS should also be change , like when the value of notified is 1.

function worksomething(orderId){
  $.ajax({
    url  : "/myirl/"+ orderId,
    type : 'GET',
    contentType : "application/json",
    dataType : "JSON",
    success: function (response) {
      alert("Disabled");
    },
    error: function (response) {
      alert("work Failed");
    }
  });
}

<table class="table" data-table ="all-orders" id="all-orders" role="grid">
     <thead>
        <tr>
            <th>ID</th>
            <th>Actions</th>
        </tr>
     </thead>
     <tbody>
        <tr th:each="order : ${orders}">
            <td>
                <button class="btn btn-link" th:text="${order?.orderId}"></button>
            </td>
            <td>
                <button type="button" class="btn btn-warning btn-md"
                            th:disabled="${(order?.notified)} == 1"
                            th:style="${(order?.notified) == 1 ? 'background-color: red;border-color:red;' : 'background-color: #eea236;border-color:#eea236;'}"
                            th:onclick="|worksomething('${order?.orderId}')|">
                Change</button>
            </td>
      </tr>
    </tbody>
</table>

Answer 1

Its better to use a Javascript library like jQuery to wire the JS events with HTML. So it makes the code a bit more clear.

<table class="table" data-table ="all-orders" id="all-orders" role="grid">
     <thead>
        <tr>
            <th>ID</th>
            <th>Actions</th>
        </tr>
     </thead>
     <tbody>
        <tr th:each="order : ${orders}">
            <td>
                <button class="btn btn-link" th:text="${order?.orderId}"></button>
            </td>
            <td>
                <button type="button" class="btn btn-warning btn-md change-btn"
                            th:disabled="${(order?.notified)} == 1"
                            th:style="${(order?.notified) == 1 ? 'background-color: red;border-color:red;' : 'background-color: #eea236;border-color:#eea236;'}"
                   the:attrs="order-id=${order?.orderId}">
                Change</button>
            </td>
      </tr>
    </tbody>
</table>

The javascript using jQuery would be:

$(function(){
  $(".change-btn").on('click', function(event){
    var ordered = $(this).attr('order-id');
    var myButton = $(this);
    $.ajax({
      url  : "/myirl/"+ orderId,
      type : 'GET',
      contentType : "application/json",
      dataType : "JSON",
      success: function (response) {
        alert("Disabled");
        $(myButton).prop('disabled', true);
        //to remove disabled:
        //$(myButton).prop('disabled', false);
      },
      error: function (response) {
        alert("work Failed");
      }
    });
  });
});