将选定的单选按钮 ID 从 Datatable 发送到 Django URL

Question

我正在寻找一种解决方案来从我的单选按钮获取值并将其发送到我的 django url。

当我在 DataTables 的第一页获得 selected 单选按钮时，它工作正常，但是，当来自其他页面（不是第一页）的 select 单选按钮时，我无法获取单选按钮值

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，但是当我在第二页或更高页面时，link“编辑”没有传递给“href” ="{% url 'update_maintenance_issue' %}" id="编辑" "

是Datatable问题还是我可以自己解决？

Answer 1

您可以将点击事件处理程序更改为 jQuery 委托事件处理程序：

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

这是如何工作的：

它将事件处理程序分配给 table 的 <tbody> 标签，而且还提供 <input> 标签作为点击事件的目标。

为什么需要这个：

当 DataTables 呈现 HTML table 时，它仅在浏览器中显示结果的第一页（在 DOM 中）。因此，即使底层 DataTables 对象包含您 table 的所有数据，但实际上只有部分数据可用于您的 jQuery 事件处理程序。

通过将事件附加到最初可用的节点，并使用“委托”语法，jQuery 将处理那些最初不可见但稍后可能会变得可见的单选按钮的点击打开（例如，当用户导航到新的结果页面时）。

您可以在委派事件处理程序部分阅读有关 here 的更多信息。

这是一个您可以自己运行的最小演示：

$(document).ready(function() {

  var table = $('#mytable1').DataTable( {
    // not directly relevant to you - you can
    // replace the following with your actual 
    // initialization properties:
    "deferRender": false
  } );

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

} );

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
  <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

</head>

<body>

<div style="margin: 20px;">

    <table id="mytable1" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                <th>No</th>
                <th>Name</th>
                <th>Position</th>
                <th>Office in Country</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input name="radio_id" type="radio" id="radio_id" value="123"></td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>0,800</td>
            </tr>
            <tr>
                <td><input name="radio_id" type="radio" id="radio_id" value="124"></td>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>0,750</td>
            </tr>
            <tr>
                <td><input name="radio_id" type="radio" id="radio_id" value="125"></td>
                <td>Ashton Cox</td>
                <td>Junior "Technical" Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>,000</td>
            </tr>
            <tr>
                <td><input name="radio_id" type="radio" id="radio_id" value="126"></td>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>3,060</td>
            </tr>
            <tr>
                <td><input name="radio_id" type="radio" id="radio_id" value="127"></td>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>2,700</td>
            </tr>
            <tr>
                <td><input name="radio_id" type="radio" id="radio_id" value="128"></td>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>
                <td>2,000</td>
            </tr>
            <tr>
                <td><input name="radio_id" type="radio" id="radio_id" value="129"></td>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012/08/06</td>
                <td>7,500</td>
            </tr>
            <tr>
                <td><input name="radio_id" type="radio" id="radio_id" value="130"></td>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010/10/14</td>
                <td>7,900</td>
            </tr>
            <tr>
                <td><input name="radio_id" type="radio" id="radio_id" value="131"></td>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>2009/09/15</td>
                <td>5,500</td>
            </tr>
            <tr>
                <td><input name="radio_id" type="radio" id="radio_id" value="132"></td>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>2008/12/13</td>
                <td>3,600</td>
            </tr>
            <tr>
                <td><input name="radio_id" type="radio" id="radio_id" value="133"></td>
                <td>Jena Gaines</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>30</td>
                <td>2008/12/19</td>
                <td>,560</td>
            </tr>
            <tr>
                <td><input name="radio_id" type="radio" id="radio_id" value="134"></td>
                <td>Quinn Flynn</td>
                <td>Support Lead</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2013/03/03</td>
                <td>2,000</td>
            </tr>
            <tr>
                <td><input name="radio_id" type="radio" id="radio_id" value="135"></td>
                <td>Charde Marshall</td>
                <td>Regional Director</td>
                <td>San Francisco</td>
                <td>36</td>
                <td>2008/10/16</td>
                <td>0,600</td>
            </tr>
            <tr>
                <td><input name="radio_id" type="radio" id="radio_id" value="136"></td>
                <td>Haley Kennedy</td>
                <td>Senior Marketing Designer</td>
                <td>London</td>
                <td>43</td>
                <td>2012/12/18</td>
                <td>3,500</td>
            </tr>
        </tbody>
    </table>

</div>

</body>
</html>

将选定的单选按钮 ID 从 Datatable 发送到 Django URL

Send selected radio button id from Datatable to Django URL

javascript

django

jquery

datatables