JQ event didnt active on the extract row sort by datatable.js
I\'m using DataTable.js to showing the data and I have some This works for me hopefully it will work for you so try this The ajax function: Edit: Hope it helps ok i fixed the event inactive on other row [old] [new] option in my and DataTable are showing the 10 frist row with defa
$('#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"
}
]
}
);
but these an other probleme is the event are duplicate $("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")},
});
});
$('table[name="commandeTable"]').on("click",function(){
$("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")},
});
});
});
加载中...
