userlist.blade.php

<!-- Your Files  -->
// @include('layout.navBar')
// @include('layout.sideBar')

<!-- Page wrapper  -->
    <!-- ============================================================== -->
    <div class="page-wrapper">
        <!-- ============================================================== -->
        <!-- Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <div class="page-breadcrumb">
            <div class="row">
                <div class="col-7 align-self-center">
                    <h4 class="page-title text-truncate text-dark font-weight-medium mb-1">Users</h4>
                    <div class="d-flex align-items-center">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb m-0 p-0">
                                <li class="breadcrumb-item"><a href="{{ url('dashboard') }}" class="text-muted">Home</a></li>
                                <li class="breadcrumb-item text-muted active" aria-current="page">Users</li>
                            </ol>
                        </nav>
                    </div>
                </div>
                <div class="col-5 align-self-center">
                    <div class="customize-input float-right">
                        <a href="{{ url('create-user') }}"><button class="btn btn-rounded btn-info">Add New User</button></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">Users</h4>
                        </div>
                        <div class="table-responsive" style="padding: 10px;">
                            <table class="table table-bordered" id="table" style="width: 100%;">
                                <thead>
                                    <tr>
                                        <th scope="col">Name</th>
                                        <th scope="col">User Name</th>
                                        <th scope="col">Role</th>
                                        <th scope="col">Created On</th>
                                        <th scope="col">Update</th>
                                        <th scope="col">Delete</th>
                                    </tr>
                                </thead>
                                <tbody>
                                   
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Your Files Name  -->
        // @include('layout.bottamBar')
    </div>
    <!-- ============================================================== -->
    <!-- End Page wrapper  -->
    <!-- ============================================================== -->
</div>
<!-- Your Files Name  -->
// @include('layout.footer-scripts')
<script>
$(document).ready( function () {
    $('#table').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ url('fetch-users') }}",
        columns: [
                { data: 'name', name: 'name' },
                { data: 'username', name: 'username' },
                { data: 'role', name: 'role' },
                { data: 'created_at', name: 'created_at' },
                { data: 'update', name: 'update', orderable: false, searchable: false },
                { data: 'delete', name: 'delete', orderable: false, searchable: false }
                
        ],
        initComplete: function () {
            // add delete event
            $(document).on("click",".delete-user", function(){
                $userId = $(this).data('id');
                if(confirm('Are you sure you wish to proceed?')){
                    $(this).parent().parent().remove();
                    $url = '{{ url("/delete-user") }}';
                    $.ajax({
                        type:'POST',
                        url:$url,
                        data:{userId:$userId},
                        success:function(data){
                        }
                    });
                }
            });
            
            // not required but you want add search box for all columns separately
            var count = 0;
            $data = $('.data-table tfoot th');
            this.api().columns().every(function () {
              var column = this;
              var input = document.createElement("input");
              var text = $data[count].innerText;
              if(count == '11'){
                // any specific column class name
                input.className = 'searchText';
               }
               
               input.placeholder = 'Search'+ text;
               $(input).appendTo($(column.footer()).empty()).on('change click', function () {
                 column.search($(this).val(), false, false, true).draw();
               });
              count++;
            });
        }
    });
});
</script>