I use laravel with datatable to display large data table.
I have a delete button at the end of each row to delete record from my database.
I use ajax and if it's a success I remove the row.
It work well on desktop but it doesn't work on mobile (except if I set computer version).
Here my table :
<table class="datatable table table-striped- table-bordered table-hover table-checkable" id="m_table_1">
<thead>
<tr>
<th>Numéro</th>
<th>Bâtiment</th>
<th>Nature</th>
<th>Options</th>
</tr>
</thead>
</table>
My js to load data :
var table = $('.datatable').DataTable({
responsive: true,
ajax: '{{ route('lots.clientSide') }}',
deferRender: true,
scrollY: '500px',
scrollCollapse: true,
scroller: true,
stateSave: true,
select: true,
language: {
url: "//cdn.datatables.net/plug-ins/1.10.16/i18n/French.json",
select: {
rows: "%d éléments sélectionnés"
}
},
columns: [
{ data: 'id' },
{ data: 'batiment.nom', defaultContent: "----" },
{ data: 'nature' },
{ data: null }
],
columnDefs:[
{targets:-1,title:"Options",width: "10%",orderable:!1,render:function(a,t,e,n){
var slug = e.id;
var url = 'show';
var url_delete = "lots/delete/"+e.id;
return '\n<a href="'+url+'" class="m-portlet__nav-link btn m-btn m-btn--hover-brand m-btn--icon m-btn--icon-only m-btn--pill" title="View">\n'+
'<i class="la la-eye"></i>\n'+
'</a>'+
'<span class="dropdown">\n'+
'<a href="#" class="btn m-btn m-btn--hover-brand m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="dropdown" aria-expanded="true">\n'+
'<i class="la la-ellipsis-h"></i>\n'+
'</a>\n'+
'<div class="dropdown-menu dropdown-menu-left">\n'+
'<a class="dropdown-item" href="#"><i class="la la-edit"></i> Editer</a>\n'+
'<button class="delete dropdown-item" data-href="'+url_delete+'"><i class="la la-trash"></i> Supprimer</button>\n'+
'</div>\n'+
'</span>\n'
}}
]
});
And my code for the remove :
$(document).on('click', '.delete', function(e){
var $this = $(this);
table.row($this.parents('tr')).remove().draw(false);
alert("click");
$.ajax({
type: 'GET',
url: $this.data('href'),
dataType: 'json',
success: function( data ) {
},
error: function(xhr, status, error) {
alert("fail");
}
})
});
I tried with debug tools on computer and I've got nothing on console.
If I use the function on computer, it work. But if I reduce size of the windows, it doesn't work under a certain size.
Is it normal ? Can I do something about it ?
Thank
I manage to avoid this problem by not hidding delete button on mobile.
Related
i try to use yajra datatables laravel
i have problem in searching
when i search data already exits in datatables it no working
me already try example in documentation but it not working for me
can someone please help me?
teach me how to do like i mean
example data
example searching
** this is my javascript datatables**
let oTable = $("#example1").DataTable({
responsive: true,
autoWidth: false,
processing: true,
serverSide: true,
ajax:
{
url: '{{ route("data.user.datatables") }}',
type: 'GET',
data: function (d) {
d.filter = $('select[name=filter]').val();
}
},
columns: [
{ data: 'id'},
{ data: function(data, type, row){
return 'Username : ' + data.username +
'<br> Email : ' + data.email +
'<br> Ponsel : ' + data.contact_number;
},
name: 'username'
},
{
data: function(data, type, row){
return 'Register Date : ' + data.created_at +
'<br> Last Login : ' + data.last_login +
'<br> App By : '+ data.app_admin +' / '+ data.date_admin_app +
'<br> App By : '+ data.login +' || '+ data.status_member;
},
name: 'created_at'
},
{ data: function(data, type, row){
return 'Saldo : ' + data.saldo +
'<br> Bank Name : ' + data.bank_name +
'<br> Account Name : '+ data.account_name +
'<br> Account Number : '+ data.account_number;
},
name:'saldo'
},
{ data: 'action', orderable: false, searchable: false}
],
order:[[0,'desc']],
});
this in my Laravel CONTROLLER
if($request->ajax()):
$request->validate([
'filter' => ['string','nullable','alpha'],
]);
if($request->filled('filter')):
$users = User::query()->where('status_member', $request->filter);
else:
$users = User::query();
endif;
$data = Datatables::of($users);
$data->addIndexColumn();
$data->addColumn('action', function ($user) {
return '<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item modal-edit-user" data-toggle="modal" data-target="#modalEditUser" href="javascript:void(0)" data-id="' . $user->id . '" data-username="' . $user->username . '" >Edit</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>';
});
$data->rawColumns(['action']);
return $data->make();
endif;
You are forwarding nothing at all to user query.
Instead of
$users = User::query()->where('status_member', $request->filter);
...
$users = User::query();
try doing
$users = User::where('status_member', $request->filter)->get();
...
$users = User::all();
EDIT:
update your code:
{ data: 'action', orderable: false, searchable: false}
to
{ data: 'action', orderable: false, searchable: true}
I have a datatables, which is filled with json data from the db.
As you can see in the last column, there are 2 buttons, one for updating and the other one for deleting the data.
When pressing the button, the value of NumEmpleado(hidden), Nombre, email and Password passes to a form.
It works just fine, buf if I resize my browser enough to kick in the responsiveness layout. Then when I click on the blue button(update), the console says it cannot read the property. I can imagine is because of the responsive layout, but I'm not sure how to deal with it.
This is table code:
<div class="table-responsive col-sm-12">
<table id="dt_cliente" class="table table-bordered table-hover nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>NumEmpleado</th>
<th>Nombre</th>
<th>Correo</th>
<th>TipoCuenta</th>
<th>Operaciones</th>
</tr>
</thead>
</table>
</div>
This is how the table is populated and then adds the update/delete buttons
var listar = function(){
$("#cuadro2").slideUp("slow");
$("#cuadro1").slideDown("slow");
var table = $("#dt_cliente").DataTable({
"destroy":true,
"responsive": true,
"ajax":{
"method":"POST",
"url": "listar.php"
},
"columns":[
{"data": "NumEmpleado"},
{"data": "nombre"},
{"data": "correo"},
{"data": "tipoCuenta"},
{"defaultContent": "<button type='button' class='editar btn btn-primary'><i class='fa fa-pencil-square-o'></i></button> <button type='button' class='eliminar btn btn-danger' data-toggle='modal' data-target='#modalEliminar' ><i class='fa fa-trash-o'></i></button>"}
],
"language": idioma_espanol,
"dom": "Bfrtip",
"buttons": [
{
"text": "<i class='fa fa-refresh'></i>",
"titleAttr": "Recargar Datos",
// "className": "btn btn-sucess",
"action": function(){
listar();
}
},
{
extend: 'excelHtml5',
text: '<i class="fa fa-file-excel-o"></i>',
titleAttr: 'Excel'
},
{
extend: 'csvHtml5',
text: '<i class="fa fa-file-text-o"></i>',
titleAttr: 'CSV'
},
{
extend: 'pdfHtml5',
text: '<i class="fa fa-file-pdf-o"></i>',
titleAttr: 'PDF'
}
]
});
obtener_data_editar("#dt_cliente tbody", table);
}
and this is the function that get the values from the table to place them on a form. (blue update button)
var obtener_data_editar = function(tbody, table) {
$(tbody).on("click", "button.editar", function(){
var data = table.row($(this).parents("tr")).data();
var numEmpleado = $("#numEmpleado").val( data.NumEmpleado),
nombre = $("#nombre").val( data.nombre ),
correo = $("#correo").val(data.correo),
password = $("#password").val(data.password),
opcion = $("#opcion").val("modificar");
$("#cuadro2").slideDown("slow");
$("#cuadro1").slideUp("slow");
});
}
Thank you for your time.
I think the problem is in either of these:-
1)Listener
2)Destroy
3)It is not able find the value of that variable because of some issues.
Kindly check all these and tell me if it solves the issue
This is the function that is called when button delete is pressed. After confirmation of delete, I want to hide the delete tr :
function delete_confirmation(id) {
var $tr = $(this).closest('tr');
swal({
title: "Are you sure?",
text: "To delete this patient!",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
$.ajax({
url: localStorage.getItem("base_url") + '' + 'index.php/Patient_ws/delete/',
timeout: 4000,
type: "POST",
data: ({id: id}),
}).done(function () {
$tr.remove();
})
.fail(function () {
swal({
title: ' erreur in server, try later...',
type: 'warning'
})
})
} else {
swal("Patient not deleted");
}
});
}
Html markup:
<a href="#" class="btn btn-danger btn-xs" onclick="delete_confirmation(<?php echo $patient->id_personne;?>)">
<i class="fa fa-trash-o"></i> Delete </a>
I want to hide tr - please help.
There is no explicit this in an onclick function unless you pass it in from the html. Try console.log(this) will see it is probably Window and not the element
Since you are already using jQuery I would suggest also using it for the event listener and moving the php output to a data attribute
HTML
<a class="delete-row-btn btn btn-danger btn-xs"
data-id="<?php echo $patient->id_personne;?>">
JS
$(document).on('click','.delete-row-btn', delete_confirmation)
function delete_confirmation(event) {
event.preventDefault();
// now `this` is the button
var id = $(this).data('id')
var $tr = $(this).closest('tr');
// all else should be same
swal({
.....
}
My problem is that when I delete a line we can only do I delete a row and jQuery practice for other lines will not be executed.
<script>
$('#destroy').on('click', function (e) {
e.preventDefault();
var token = $('input[name="_token"]').attr('value');
var id = $('#destroy').data("id");
$.ajax(
{
url: "{{ url('/category') }}" + '/' + id + '/delete',
type: 'post',
dataType: "JSON",
data: {"id": id, '_token': token},
success: function (data) {
alert(data.msg)
}
});
console.log("It failed");
});
</script>
line:
<tr id="destroy_">
<td>
<a id="destroy" data-id="{{$cat->id}}" href="#">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</a>
</td>
<td>
<a href="{{action('categoryController#update',[$cat->id])}}">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>
</td>
<td>
<a href="{{action('categoryController#show', [$cat->id])}}">
{{$cat->category}}
</a>
</td>
<th class="text-right">{{$cat->id}}</th>
</tr>
Using ID's for actions that are repeated in a table is a bad idea if you don't name them dynamically. Either way I suggest using anything other than an ID, for example a custom data attribute. So use this for your delete links:
<a data-delete data-id="{{$cat->id}}" href="#">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</a>
And in your JS code instead of #destroy you can now use the following selector to match them:
$(document).on('click', '[data-delete]', function (e) {
e.preventDefault();
var token = $('input[name="_token"]').attr('value');
var id = $(this).data("id");
$.ajax(
{
url: "{{ url('/category') }}" + '/' + id + '/delete',
type: 'post',
dataType: "JSON",
data: {"id": id, '_token': token},
success: function (data) {
alert(data.msg)
},
error: function () {
// Also the failed request should be handled here
// not below the ajax call because it's asynchronous
console.log("It failed");
}
});
});
I have a problem when I want delete a register with Ajax and Symfony, in template Twig.
<tbody>
{% for entity in entities %}
<tr>
<td>
<a class="delete btn btn-danger btn-xs glyphicon glyphicon-trash" data-playgroup-id="{{ entity.id }}" ></a>
</td>
</tr>
{% endfor %}
</tbody>
Ajax:
$(document).ready(function() {
$(".delete").click(function(){
var pid = $(this).attr("data-playgroup-id");
bootbox.confirm("Are you sure?", function(result) {
if(result){
$.ajax({
url: '{{path('playergroup_delete', { 'id': pid}) }}',
type: 'delete',
success: function(result) {
console.log('Delete');
},
error: function(e){
console.log(e.responseText);
}
});
}
});
});
});
I receive the next error:
Variable "pid" does not exists.
Thanks!
As MouradK say you ar passing a variable in a twig function (server side) and you are getting this variable using javascript (client side).
to solve this do something like this :
$(document).ready(function() {
$(".delete").click(function(){
var pid = $(this).attr("data-playgroup-id");
bootbox.confirm("Are you sure?", function(result) {
url = '{{path('playergroup_delete', { 'id': 0}) }}';
url = $url.replace("0",pid);
if(result){
$.ajax({
url: url,
type: 'delete',
success: function(result) {
console.log('Delete');
},
error: function(e){
console.log(e.responseText);
}
});
}
});
});
});
It means that you did not pass the pid variable to your Twig template.
Pass it trough the controller and you'll be fine
The error is :
You are trying to set a variable comming from the client (javascript) in your twig template (which is a server side).