Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!-- 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment