Как обновить или перерисовать строки таблицы

Question

Ниже приводится классическая проблема, с которой я сталкиваюсь при разработке приложения. У меня в массиве Spring есть массив JSONObjects, которые я должен перебирать в jsp; Также устанавливается другой атрибут состояния с именем JSONArrayStatus, который указывает, является ли массив JSON пустым или нет.

Используя jquery, если JSONArray пуст, я покажу noDataImageDiv, иначе покажет tableDIV (Привязка данных из JSONArray с использованием JSTL)

Проблема, с которой я сталкиваюсь, заключается в следующем. 1. Отредактируйте строку в таблице и нажмите «Обновить». В это время я делаю Ajax Call, скажем, «Обновлено пользователь», который возвращает все записи вместе с обновленными записями. Я мог бы использовать обновление, однако это не рекомендуется для пользователя и, следовательно, нет нет.

2. Чтобы отразить обновленных пользователей в таблице, я использую jquery, как показано ниже
   • очистка строк таблицы table.clear (). Draw ()
   • Цикл набора результатов следующим образом.

код перерисовки

function reDrawExternalContactUsers(externalUsers) {
    table.clear().draw();
    var row = "";
    $.each(externalUsers, function (i, field) {
        row = '<tr><td></td><td></td><td class="edit">edit</td></tr>';
        $("#tableDIV").append(row);
    });
}

После этого процесса перерисовки или обновления

Эта функция НЕ работает

$(".edit").click(function(){ 
});

Эта функция работает

$("#tableDIV .edit").click(function(){ 
}); 

Предложите лучший способ обновления строк таблицы, если таковые имеются.

<div id="tableDIV">
   <table id="tableID">
      <thead>
         <tr>
            <th></th>
            <th></th>
            <th></th>
         </tr>
      </thead>
      <tbody>
         if data exist
         loop{
         <tr>
            <td></td>
            <td></td>
            <td class="edit">edit</td>
         </tr>
         } // loops ends
         if close
      </tbody>
   </table>
</div>
<div id="noDataImageDiv"> No data image</div>

Answer 1

HTML-код:

<div id="tableDIV">
  <table id="tableID">
    <thead>
      <tr>
        <th></th>
        <th></th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      if data exist
      loop{
      <tr>
        <td class="user-name"></td>
        <td></td>
        <td class="edit" data-user-id="">edit</td> //set user_id in attr data-user-id
      </tr>
      } // loops ends
      if close
    </tbody>
  </table>
</div>
<div id="noDataImageDiv"> No data image</div>

код запроса:

Вы должны использовать событие щелчка на документе

$(document).on('click', '.edit', function () {
  var btn = $(this);
  var user_id = btn.attr("data-user-id"); //user_id of user will update
  // extra user data  
  $.ajax({
    method: "POST",
    url: url,
    data: {
      'id': id,
      // extra data to send
    },
    success: function (data) {
      if (data.status) // successfully user updated
      {
        var user = data.user;
        /* you can set user data like this */
        btn.closest('tr').find('.user-name').html(user.name);
      }
    }
  });
});