JQ 事件在 datatable.js 的提取行排序上没有激活 [英] JQ event didnt active on the extract row sort by datatable.js
问题描述
我正在使用 DataTable.js 来显示数据，我的 I'm using DataTable.js to showing the data and I have some 我试图在选择元素上添加 I tried to add 我只是尝试在所有行上激活 I'm just trying the [函数 showReqTypeAsOption] [function showReqTypeAsOption] 这对我有用，希望对你有用，所以试试这个 This works for me hopefully it will work for you so try this ajax 函数: 希望能帮到你 这篇关于JQ 事件在 datatable.js 的提取行排序上没有激活的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ 中有一些 选项，DataTable 显示了 10 个第一个带有默认参数的行，我有一个 JQ 的更改事件.这是我的问题，JQ .change() 事件仅适用于第 10 行.如果我更改用户视图中的显示选项(在代码源中没有)，它仍然适用于第 10 行.
<select> option in my <tr> and DataTable are showing the 10 frist row with default param and I have a change event with JQ. Here is my problem, the JQ .change() event only work at the 10 frist row.
If I change the show option in the user view (no in the code source), it still work for the 10 frist row.onchange="changeEvent" ..它没有出现在用户显示代码源中onchange="changeEvent" on the select element.. well it didnt show up in user display code source $('select[name="type"]').change(function(){
var type_req = $(this).val();
var id = $(this).closest('tr').find('td#id_commande').html();
var action ="update";
var action_infos = "type_req";
console.log("change event active");
console.log(type_req);
console.log(id);
$.ajax({
type: "POST",
url: "../controllers/commandeController.private.php",
data:{id:id ,action : action ,action_infos : action_infos ,type : type_req},
success:function(){toastr.success("Modification commande réussi")},
error:function(){toastr.error("Modification commande impossible")},
});
});
.change 即使它们是在用户更改显示选项后显示的.change active on all row even they are show up after by user changing show up optionfunction showReqTypeAsOption($array=array()){
$option="";
if(!$array == null){
if(empty($array['name'])){
$array['name']="type_bis";
}
if(!empty($array['current_type'])){
$select=1;
}
}
$res=getReqType();
foreach ($res as $ligne) {
if($select){
if($ligne['id'] == $array['current_type']){
$selected= "selected";
// $select=0;
}else{
$selected= "";
}
}
$option = $option."<option value='".$ligne['id']."' $selected > ".$ligne['type_name']." </option>";
};
$option='<select name="'.$array['name'].'" id="Req_type" > '.$option.' </select>';
return $option;
}
// DataTable
$(document).ready(function() {
$('#MyTable').DataTable();
$('#defaultTable2').DataTable();
$('#defaultTable3').DataTable();
$('#defaultTable4').DataTable();
});
$(function() {
$('#myTable').DataTable();
$("select[name='type']").change(function() {
var type_req = $(this).val();
var id = $(this).closest('tr').find('td.id_commande').html();
console.log("change event active");
console.log(type_req);
console.log(id);
});
});<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="scripts/script.js"></script>
<title></title>
</head>
<body>
<table id="MyTable" class="table table-bordered display" style="width:100%">
<thead>
<tr>
<th>ID Col</th>
<th>Select</th>
</tr>
</thead>
<tbody>
<tr>
<td class="id_commande">Row 1</td>
<td><select name="type" id="">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
<option value="4"> option 4</option>
<option value="5"> option 5</option>
</select></td>
</tr>
<tr>
<td class="id_commande">Row 2</td>
<td><select name="type" id="">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
<option value="4"> option 4</option>
<option value="5"> option 5</option>
</select></td>
</tr>
<tr>
<td class="id_commande">Row 3</td>
<td><select name="type" id="">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
<option value="4"> option 4</option>
<option value="5"> option 5</option>
</select></td>
</tr>
<tr>
<td class="id_commande">Row 4</td>
<td><select name="type" id="">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
<option value="4"> option 4</option>
<option value="5"> option 5</option>
</select></td>
</tr>
<tr>
<td class="id_commande">Row 5</td>
<td><select name="type" id="">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
<option value="4"> option 4</option>
<option value="5"> option 5</option>
</select></td>
</tr>
<tr>
<td class="id_commande">Row 6</td>
<td><select name="type" id="">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
<option value="4"> option 4</option>
<option value="5"> option 5</option>
</select></td>
</tr>
<tr>
<td class="id_commande">Row 7</td>
<td><select name="type" id="">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
<option value="4"> option 4</option>
<option value="5"> option 5</option>
</select></td>
</tr>
<tr>
<td class="id_commande">Row 8</td>
<td><select name="type" id="">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
<option value="4"> option 4</option>
<option value="5"> option 5</option>
</select></td>
</tr>
<tr>
<td class="id_commande">Row 9</td>
<td><select name="type" id="">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
<option value="4"> option 4</option>
<option value="5"> option 5</option>
</select></td>
</tr>
<tr>
<td class="id_commande">Row 10</td>
<td><select name="type" id="">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
<option value="4"> option 4</option>
<option value="5"> option 5</option>
</select></td>
</tr>
<tr>
<td class="id_commande">Row 11</td>
<td><select name="type" id="">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
<option value="4"> option 4</option>
<option value="5"> option 5</option>
</select></td>
</tr>
<tr>
<td class="id_commande">Row 12</td>
<td><select name="type" id="">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
<option value="4"> option 4</option>
<option value="5"> option 5</option>
</select></td>
</tr>
<tr>
<td class="id_commande">Row 13</td>
<td><select name="type" id="">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
<option value="4"> option 4</option>
<option value="5"> option 5</option>
</select></td>
</tr>
<tr>
<td class="id_commande">Row 14</td>
<td><select name="type" id="">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
<option value="4"> option 4</option>
<option value="5"> option 5</option>
</select></td>
</tr>
<tr>
<td class="id_commande">Row 15</td>
<td><select name="type" id="">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
<option value="4"> option 4</option>
<option value="5"> option 5</option>
</select></td>
</tr>
<tr>
<td class="id_commande">Row 16</td>
<td><select name="type" id="">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
<option value="4"> option 4</option>
<option value="5"> option 5</option>
</select></td>
</tr>
<tr>
<td class="id_commande">Row 17</td>
<td><select name="type" id="">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
<option value="4"> option 4</option>
<option value="5"> option 5</option>
</select></td>
</tr>
<tr>
<td class="id_commande">Row 18</td>
<td><select name="type" id="">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
<option value="4"> option 4</option>
<option value="5"> option 5</option>
</select></td>
</tr>
<tr>
<td class="id_commande">Row 19</td>
<td><select name="type" id="">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
<option value="4"> option 4</option>
<option value="5"> option 5</option>
</select></td>
</tr>
<tr>
<td class="id_commande">Row 20</td>
<td><select name="type" id="">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
<option value="4"> option 4</option>
<option value="5"> option 5</option>
</select></td>
</tr>
<tr>
<td class="id_commande">Row 21</td>
<td><select name="type" id="">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
<option value="4"> option 4</option>
<option value="5"> option 5</option>
</select></td>
</tr>
<tr>
<td class="id_commande">Row 22</td>
<td><select name="type" id="">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
<option value="4"> option 4</option>
<option value="5"> option 5</option>
</select></td>
</tr>
<tr>
<td class="id_commande">Row 23</td>
<td><select name="type" id="">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
<option value="4"> option 4</option>
<option value="5"> option 5</option>
</select></td>
</tr>
<tr>
<td class="id_commande">Row 24</td>
<td><select name="type" id="">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
<option value="4"> option 4</option>
<option value="5"> option 5</option>
</select></td>
</tr>
<tr>
<td class="id_commande">Row 25</td>
<td><select name="type" id="">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
<option value="4"> option 4</option>
<option value="5"> option 5</option>
</select></td>
</tr>
<tr>
<td class="id_commande">Row 26</td>
<td><select name="type" id="">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
<option value="4"> option 4</option>
<option value="5"> option 5</option>
</select></td>
</tr>
<tr>
<td class="id_commande">Row 27</td>
<td><select name="type" id="">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
<option value="4"> option 4</option>
<option value="5"> option 5</option>
</select></td>
</tr>
<tr>
<td class="id_commande">Row 28</td>
<td><select name="type" id="">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
<option value="4"> option 4</option>
<option value="5"> option 5</option>
</select></td>
</tr>
<tr>
<td class="id_commande">Row 29</td>
<td><select name="type" id="">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
<option value="4"> option 4</option>
<option value="5"> option 5</option>
</select></td>
</tr>
<tr>
<td class="id_commande">Row 30</td>
<td><select name="type" id="">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
<option value="4"> option 4</option>
<option value="5"> option 5</option>
</select></td>
</tr>
</tbody>
</table>推荐答案
$('#example tbody').on( 'change', 'select[name="your_select_name"]',function(){
var data = '';
data = example.row( $(this).parents('tr') ).data();
var clientid = data['your column name'];
var selectId = this.value;
console.log(clientId);
console.log(selectedId);
//if id is okay do an ajax call inside a function something like this
if(clientid != undefined){
ajaxCallBack(clientId,selectedId)
.done(function(response){
//your update response here
})
}
})
function ajaxCallBack(clientId,selectId){
return $.ajax({
method: "POST",
url: "YourUrl",
data: { action: "UPD", clientId: clientId, selectId: selectId}
})
}
Your datatable should be declared like this:
var example= $('#example').DataTable({
"destroy": true,
"responsive":{
"details": {
renderer: function ( api, rowIdx, columns ) {
var data = $.map( columns, function ( col, i ) {
return col.hidden ?
'<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
'<td>'+col.title+':'+'</td> '+
'<td>'+col.data+'</td>'+
'</tr>' :
'';
} ).join('');
return data ?$('<table/>').append( data ) :false;
}
}
},
"autoWidth": false,
"ajax": {
"url": 'some.php',
"method": 'POST',
data:{accion:"SLC"}
},
"columns": [
{"data": "client"},
{"data": "name"},
{"data": "lastname"},
{"data": "device"},
{"data": "city"},
{
className: "center",
defaultContent:"<select id='idSelect' name ='idSelect' ><option value='default'>Seleccionar</option><option value='1'>hello</option></select>"
}
],
"language":{"url": "//cdn.datatables.net/plug-ins/1.10.15/i18n/Spanish.json"},
"columnDefs": [
{
"className": "dt-center", "targets": "_all"
}
]
}
);
登录
关闭
