datatables.blade.php

@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