Получить строку нажатой в сетке Datatables.net после закрытия модальной

Question

Я использую Datatables.net для отображения таблицы платежей.

В каждой строке последний столбец содержит кнопку «Редактировать».

<button type="button" class="btn btn-link" data-toggle="modal" data-target="#modalCategoryTypeEditor" data-action="@Url.Action("EditCategory", new { @item.PaymentId })">Edit</button>

Кнопка содержит атрибут действия данных со ссылкой, указывающей на действие.

Кнопка «Редактировать» запускает модальное окно, которое использует функцию загрузки jQuery для вызова Действие кнопки для извлечения содержимого модального тела.

$('#modalCategoryTypeEditor').on('show.bs.modal', function (event) {
    var toggleModal = $(event.relatedTarget) // Button that triggered the modal
    var actionUrl = toggleModal.data('action') // Extract info from data-* attributes

    $(this).find('.modal-body').load(actionUrl);
});

Как только пользователь нажимает кнопку СохранитьКнопка модального окна, на сервере вызывается действие, которое возвращает строковый результат.

Вопрос : Как установить для этого результата строки один из столбцов строки, по которой был выполнен щелчок?Другими словами, в этот момент после закрытия модального режима, как мне узнать, в какой строке щелкнули?

Я знаю, как определить строку, по которой щелкнули - я используюниже.Но он не работает после закрытия модального окна.Даже если я включу это в событие hide.bs.modal.

$('#payments_list tbody').on('click', 'tr', function () {
     console.log(table.cell(table.row(this).data()));
});

---

РЕДАКТИРОВАТЬ:

---

Чтобы уточнить, я знаю,как получить идентификатор записи, принадлежащей строке, по которой щелкнули.Затем я запускаю свое модальное окно, в котором я делаю изменения, и отправляю изменения на сервер для сохранения.Сервер возвращает строковый ответ, и мне нужно использовать эту строку, чтобы заполнить ячейку в строке, по которой щелкнули.Проблема в том, что ответ сервера происходит намного позже после события щелчка строки.Другими словами, функция, которая обрабатывает событие щелчка строки, запускает модальный режим, и все, функция заканчивается.

$('#exampleTable tbody').on( 'click', 'a', function () {
    var data = '';
    data = exampleTable.row( $(this).parents('tr') ).data();
    console.log(data);
    var carId= data['id'];

    $('#exampleModal').modal();
})

// function that gets called after ajax form post completes
var onCompleted = function() {
    // How do I find out which row was clicked at this point
}

// form inside modal
<form id="formInsideModal" method="post" data-ajax-complete="onCompleted" data-ajax="true" data-ajax-method="post" >
    // some input fields to be saved
    <button type="submit" id="saveBtnInsideModal">Submit</button>
</form>

Answer 1

Я интерпретирую ваш запрос так, что вы запускаете модал, вносите изменения и отправляете значение на сервер с помощью вызова $.ajax, после чего сервер возвращает строковое значение, которое необходимо установить в определенном столбце datatable.

Во-первых, у меня будет атрибут, установленный в модале как data-rowindex как (Это образец модального набора, который я создал; вы можете изменить его для своего собственного):

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" id="YourModal" data-rowindex="-1">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Amend</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="recipient-position" class="control-label">Position:</label>
            <input type="text" class="form-control" id="recipient-position">
          </div>
        </form>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal" id="YourModalSubmitButton" data-rowindex="-1" data-comment="" data-context="" data-tag="">Submit</button>
        </div>
      </div>
    </div>
  </div>

После нажатия кнопки «Правка» необходимо определить индекс строки.

table.on("click", "tr", function() {
    var tr = $(this).closest('tr');
    var row = table.row(tr);
    var idx = row.index();

    //Set the row index to the Modal's data attribute
    $('#YourModal').data('rowindex', idx);

  });

Здесь можно проверить, было ли применено значение индекса:

$('#YourModal').on('show.bs.modal', function(event) {
    var rIdx = $(this).data('rowindex');

    var modal = $(this);
//I set the rowindex value back to a data attribute in the submit button of the modal
    modal.find('#YourModalSubmitButton').data('request', rIdx);
    modal.find('.modal-title').html('The Row You Selected is ' + rIdx);
  });

Затем нажмите кнопку «Отправить» на модале. Нажмите, чтобы сделать следующее:

$('#YourModal').find('#YourModalSubmitButton').click(function(event) {
    event.preventDefault();
    var target = $(event.target); // Button that triggered the modal
    var idx= target.data('rowindex');
    //To get value from Form elements
    var formElementVal = $('#YourModal').find('#Form-element-value').val();


//do your ajax call here get the result
    table.cell({
      row: idx,
      column: 1
    }).data(formElementVal).draw();
  });

Надеюсь, это поможет.

Вы также можете проверить JsFiddle, который я сделал, для более похожих требований.

Answer 2

Привет, в объявлении dataTable поместите столбец содержимого по умолчанию, например:

 "columns": [
                   {"data": "id"},
                   {"data": "fullname"},
                   {"data": "address"},
                   {"data": "company"},
                   {"data": "Cars"},
                   {
                className: "center",
                defaultContent:"<a name='idClient' class='btn btn-info' ><span class='glyphicon glyphicon-list-alt'></span> Show Cars Info</a>"
              }
               ]

, и событие, на которое вы должны сделать это, так:

    // The click event to get the data into a new DataTable inside the modal
             //note: you have to declare the dataTable like this
             //exampleTable = $('#exampleTable').DataTable({ your stuff });
               $('#exampleTable tbody').on( 'click', 'a', function () {
                  var data = '';
                  data = exampleTable.row( $(this).parents('tr') ).data();
                  console.log(data);
                  var carId= data['id'];
                  console.log(carId);
})

Надеюсь, это поможет