Skip to content

Instantly share code, notes, and snippets.

@infinitbility

infinitbility/userlist.blade.php

Last active June 25, 2020 14:55
Show Gist options
  • Save infinitbility/ee50ddce271130ced4a5a6afccba394d to your computer and use it in GitHub Desktop.
Save infinitbility/ee50ddce271130ced4a5a6afccba394d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. infinitbility revised this gist Jun 25, 2020. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions userlist.blade.php
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    <!-- Your Files -->
    # @include('layout.navBar')
    # @include('layout.sideBar')
    // @include('layout.navBar')
    // @include('layout.sideBar')

    <!-- Page wrapper -->
    <!-- ============================================================== -->
    @@ -57,14 +57,14 @@
    </div>
    </div>
    <!-- Your Files Name -->
    # @include('layout.bottamBar')
    // @include('layout.bottamBar')
    </div>
    <!-- ============================================================== -->
    <!-- End Page wrapper -->
    <!-- ============================================================== -->
    </div>
    <!-- Your Files Name -->
    # @include('layout.footer-scripts')
    // @include('layout.footer-scripts')
    <script>
    $(document).ready( function () {
    $('#table').DataTable({
  2. infinitbility created this gist Jun 25, 2020.
    121 changes: 121 additions & 0 deletions userlist.blade.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,121 @@
    <!-- 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>