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

【问题标题】：Send selected radio button id from Datatable to Django URL将选定的单选按钮 ID 从 Datatable 发送到 Django URL
【发布时间】：2022-01-08 05:53:49
【问题描述】：

我正在寻找一种解决方案来从我的单选按钮中获取值并将其发送到我的 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，但是当我在第二页或更高页面时，链接“编辑”不会传递给“href="{% url ' update_maintenance_issue' %}" id="edit" "

这是数据表问题还是我可以自己解决？

【问题讨论】：

标签： javascript jquery django datatables

【解决方案1】：

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

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

这是如何工作的：

它将事件处理程序分配给表的<tbody> 标签，但也提供<input> 标签作为点击事件的目标。

为什么需要这样做：

当 DataTables 呈现 HTML 表格时，它仅在浏览器中（在 DOM 中）显示结果的第一页。因此，即使底层 DataTables 对象包含您的所有表数据，也只有部分数据实际上可用于您的 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>$320,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>$170,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>$86,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>$433,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>$162,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>$372,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>$137,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>$327,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>$205,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>$103,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>$90,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>$342,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>$470,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>$313,500</td>
            </tr>
        </tbody>
    </table>

</div>

</body>
</html>

【讨论】：

以下内容可能也有帮助：Direct vs. Delegated - jQuery .on()
谢谢@andrewJames，这个解决方案确实解决了我的问题。