我正在尋找一種解決方案來從我的單選按鈕中獲取值并將其發送到我的 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="編輯" "
這是資料表問題還是我可以自己解決？
uj5u.com熱心網友回復：
您可以將單擊事件處理程式更改為 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 將處理那些最初不可見但稍后可能變得可見（例如，當用戶導航時）的單選按鈕的點擊到新的結果頁面）。
你可以閱讀更多關于此在委托的事件處理程式的部分。
這是您可以自己運行的最小演示：
$(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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/371615.html
標籤：javascript 查询 姜戈 数据表