Skip to content

Instantly share code, notes, and snippets.

@uno-de-piera

uno-de-piera/datatables.blade.php Secret

Last active May 31, 2020
Embed
What would you like to do?
@extends('layouts.app')
@section('title', 'Listado Usuarios')
@push('styles')
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<style>
#users-table th, #users-table td
{
text-align:center;
vertical-align:middle;
}
</style>
@endpush
@section('content')
<div class="container">
<div class="row">
<div class="col-12">
<table class="table table-bordered" id="users-table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Acciones</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
@endsection
@push('scripts')
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script>
var dt;
jQuery(function()
{
dt = jQuery('#users-table').DataTable({
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/Spanish.json"
},
pageLength: 5,
processing: true,
serverSide: true,
ajax: '{!! route('users.json_data') !!}',
columns: [
{data: 'id', name: 'id' },
{ data: 'name', name: 'name' },
{ data: 'email', name: 'email' },
{ data: 'actions', name: 'actions', searchable: false },
]
});
jQuery(document).on('click', '#users-table a', function(e)
{
if(jQuery(this).data('remove'))
{
e.preventDefault();
var id = $(this).data('id');
jQuery.ajax({
url: jQuery(this).attr('href'),
method: 'DELETE',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
},
data: {
id: id
},
success: function (data) {
dt.ajax.reload();
}
});
}
})
});
</script>
@endpush
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment