Отправка идентификатора выбранной радиокнопки из Datatable в Django URL

Я ищу решение для получения значения из моей радиокнопки и отправки его в мой django url.

Когда я выбираю радиокнопку на первой странице DataTables, она работает правильно, Однако при выборе радиокнопки на другой странице (не первой), я не могу получить значение радиокнопки

HTML

<a href="{% url 'update_maintenance_issue' %}" id="edit">
    <img src="{% static 'images/icons/edit3.png' %}">
</a>

<table id="mytable1">
<thead align="center">
    <tr align="center" style="font-weight:bold">
        <th style="cursor:pointer" align="center">No</th>
        <th style="cursor:pointer" align="center">ID</th>
        <th style="cursor:pointer" align="center">Type</th>
        <th style="cursor:pointer" align="center">Line</th>
        <th style="cursor:pointer" align="center">Sequence</th>
        <th style="cursor:pointer" align="center">Module</th>
        <th style="cursor:pointer" align="center">Item</th>
        <th style="cursor:pointer" align="center">Sympton</th>
        <th style="cursor:pointer" align="center">status</th>
        <th style="cursor:pointer" align="center">Register</th>
        <th style="cursor:pointer" align="center">Assigned</th>
        <th style="cursor:pointer" align="center">Register dt</th>
    </tr>
</thead>
<tbody>
{% for list in issue_list %}
 <tr>
    <td>
      <input name="radio_id" type="radio" id="radio_id" value="{{list.id}}">
    </td>    
    <td align="center">{{ list.id }} </td>  
    <td align="center">{{ list.line_nm }} </td>
    <td align="center">{{ list.line_nm }} </td>
    <td align="center">{{ list.sequence}} </td>
    <td align="center">{{ list.division }} </td>
    <td align="center">{{ list.module }} </td>
    <td align="left">{{ list.sympton }}</td>
    <td align="left">{{ list.status }}</td>    
    <td align="center">{{ list.register }}</td>     
    <td align="center">{{ list.assigned }}</td>   
    <td align="center">{{ list.register_dt|date:'d/m/Y H:i' }}</td>
</tr>
{% endfor %}
</tbody>
</table>

<!--DataTables-->

<script type="text/javascript">
$(document).ready( function (){
  $('#mytable1').DataTable();
  });
</script>

<!--Get ID from selected radio button and insert into django "edit" url-->

<script>
$(function(){
  $('input[type="radio"]').click(function(){
    if ($(this).is(':checked'))
    {
      let link = $('#edit')
      let currentHref = link.attr("href")
      let newHref = currentHref.split("?radio_id=")[0] + "?radio_id=" + $(this).val()
      link.attr("href", newHref);
    }
  });
});
</script>

Когда я нахожусь на первой странице, я могу правильно получить ID радиокнопки, но когда я нахожусь на второй или более высокой странице, ссылка "edit" не передается "href="{% url 'update_maintenance_issue' %}" id="edit""

Является ли это проблемой Datatable или я могу решить ее самостоятельно?

Вы можете изменить обработчик события click на делегированный обработчик события jQuery:

$( '#mytable1 tbody' ).on( "click", 'input[type="radio"]', function(){
  if ($(this).is(':checked')) {
    console.log( $(this).val() );
  }
});

Как это работает:

Он назначает обработчик события на тег <tbody> таблицы, но также предоставляет тег <input> в качестве цели для события щелчка.

Почему это необходимо:

Когда DataTables отображает HTML-таблицу, он отображает в браузере (в DOM) только первую страницу результатов. Таким образом, даже если объект DataTables содержит все данные вашей таблицы, только часть этих данных фактически доступна вашему обработчику событий jQuery.

Прикрепляя событие к узлу, который изначально доступен, и используя синтаксис "delegated", jQuery будет обрабатывать нажатия для тех радиокнопок, которые изначально не видны, но могут стать видимыми позже (например, когда пользователь перейдет на новую страницу результатов).

Подробнее об этом вы можете прочитать здесь в разделе о делегированных обработчиках событий.


Вот минимальная демонстрация, которую вы можете запустить самостоятельно:

Вернуться на верх