215 lines
9.7 KiB
PHP
215 lines
9.7 KiB
PHP
@extends('admin.layouts.app')
|
|
|
|
@section('title', 'Table Test')
|
|
|
|
@push('style')
|
|
<!-- CSS Libraries -->
|
|
@endpush
|
|
|
|
@section('main')
|
|
<div class="main-content">
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<h1>Table</h1>
|
|
<div class="section-header-breadcrumb">
|
|
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
|
<div class="breadcrumb-item"><a href="#">Components</a></div>
|
|
<div class="breadcrumb-item">Table</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-body">
|
|
<h2 class="section-title">Table</h2>
|
|
<p class="section-lead">Example of some Bootstrap table components.</p>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4>Table Test</h4>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="table-responsive">
|
|
<table class="table-striped table-md table" id="listingTable">
|
|
<tr>
|
|
<th>#</th>
|
|
<th>Name</th>
|
|
<th>Created At</th>
|
|
<th>Status</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
<tr>
|
|
<td>1</td>
|
|
<td>Irwansyah Saputra</td>
|
|
<td>2017-01-09</td>
|
|
<td>
|
|
<div class="badge badge-success">Active</div>
|
|
</td>
|
|
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>2</td>
|
|
<td>Hasan Basri</td>
|
|
<td>2017-01-09</td>
|
|
<td>
|
|
<div class="badge badge-success">Active</div>
|
|
</td>
|
|
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>3</td>
|
|
<td>Kusnadi</td>
|
|
<td>2017-01-11</td>
|
|
<td>
|
|
<div class="badge badge-danger">Not Active</div>
|
|
</td>
|
|
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>4</td>
|
|
<td>Rizal Fakhri</td>
|
|
<td>2017-01-11</td>
|
|
<td>
|
|
<div class="badge badge-success">Active</div>
|
|
</td>
|
|
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>5</td>
|
|
<td>Isnap Kiswandi</td>
|
|
<td>2017-01-17</td>
|
|
<td>
|
|
<div class="badge badge-success">Active</div>
|
|
</td>
|
|
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>6</td>
|
|
<td>Tatamg</td>
|
|
<td>2017-01-17</td>
|
|
<td>
|
|
<div class="badge badge-success">Active</div>
|
|
</td>
|
|
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>7</td>
|
|
<td>Rendy</td>
|
|
<td>2017-01-17</td>
|
|
<td>
|
|
<div class="badge badge-success">Active</div>
|
|
</td>
|
|
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>8</td>
|
|
<td>Jagadd</td>
|
|
<td>2017-01-17</td>
|
|
<td>
|
|
<div class="badge badge-success">Active</div>
|
|
</td>
|
|
<td><a href="#" class="btn btn-secondary">Detail</a></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer text-right">
|
|
<nav class="d-inline-block">
|
|
<ul class="pagination mb-0">
|
|
<li class="page-item active">
|
|
<a class="page-link" onclick="prevPage()" href="#" tabindex="-1"><i
|
|
class="fas fa-chevron-left"></i></a>
|
|
</li>
|
|
<li class="page-item ">
|
|
<span id="page" class="page-link"></span>
|
|
</li>
|
|
<li class="page-item active">
|
|
<a class="page-link" onclick="nextPage()" href="#"><i
|
|
class="fas fa-chevron-right"></i></a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
var current_page = 1;
|
|
var records_per_page = 5;
|
|
var l = document.getElementById("listingTable").rows.length
|
|
|
|
function prevPage() {
|
|
|
|
if (current_page > 1) {
|
|
current_page--;
|
|
changePage(current_page);
|
|
}
|
|
}
|
|
|
|
function nextPage() {
|
|
if (current_page < numPages()) {
|
|
current_page++;
|
|
changePage(current_page);
|
|
}
|
|
}
|
|
|
|
function changePage(page) {
|
|
var btn_next = document.getElementById("btn_next");
|
|
var btn_prev = document.getElementById("btn_prev");
|
|
var listing_table = document.getElementById("listingTable");
|
|
var page_span = document.getElementById("page");
|
|
|
|
// Validate page
|
|
if (page < 1) page = 1;
|
|
if (page > numPages()) page = numPages();
|
|
|
|
[...listing_table.getElementsByTagName('tr')].forEach((tr) => {
|
|
tr.style.display = 'none'; // reset all to not display
|
|
});
|
|
listing_table.rows[0].style.display = ""; // display the title row
|
|
|
|
for (var i = (page - 1) * records_per_page + 1; i < (page * records_per_page) + 1; i++) {
|
|
if (listing_table.rows[i]) {
|
|
listing_table.rows[i].style.display = ""
|
|
} else {
|
|
continue;
|
|
}
|
|
}
|
|
|
|
page_span.innerHTML = page + "/" + numPages();
|
|
|
|
if (page == 1) {
|
|
btn_prev.style.visibility = "hidden";
|
|
} else {
|
|
btn_prev.style.visibility = "visible";
|
|
}
|
|
|
|
if (page == numPages()) {
|
|
btn_next.style.visibility = "hidden";
|
|
} else {
|
|
btn_next.style.visibility = "visible";
|
|
}
|
|
}
|
|
|
|
function numPages() {
|
|
return Math.ceil((l - 1) / records_per_page);
|
|
}
|
|
|
|
window.onload = function() {
|
|
changePage(current_page);
|
|
};
|
|
</script>
|
|
<!-- JS Libraies -->
|
|
<script src="{{ asset('admin/library/jquery-ui-dist/jquery-ui.min.js') }}"></script>
|
|
|
|
<!-- Page Specific JS File -->
|
|
<script src="{{ asset('admin/js/page/components-table.js') }}"></script>
|
|
@endpush
|