Scribd
Upload
13 views5 pages

Displaying Table

The document contains a controller function that retrieves hacker data based on search and sorting parameters, and then displays it on a web page. The HTML structure includes a filter form for searching and sorting, as well as a table to display the hacker data with pagination. The page is styled with CSS for a visually appealing layout.

Uploaded by

mccntnd
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
13 views5 pages

Displaying Table

The document contains a controller function that retrieves hacker data based on search and sorting parameters, and then displays it on a web page. The HTML structure includes a filter form for searching and sorting, as well as a table to display the hacker data with pagination. The page is styled with CSS for a visually appealing layout.

Uploaded by

mccntnd
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

//controller to pass data to the page

public function showDataOnWeb(Request $request)


{
// Fetch query parameters
$search = $request->input('search');
$sortField = $request->input('sortField', 'id'); // Default sort by 'id'
$sortOrder = $request->input('sortOrder', 'asc'); // Default sort order
$perPage = $request->input('perPage', 10); // Default to 10 entries per
page

// Query the hackers table with search and sorting


$hackers = Hackers::when($search, function ($query, $search) {
return $query->where('name', 'like', "%$search%")
->orWhere('alias', 'like', "%$search%")
->orWhere('specialty', 'like', "%$search%")
->orWhere('country', 'like', "%$search%")
->orWhere('notable_achievement', 'like', "%$search%");
})
->orderBy($sortField, $sortOrder)
->paginate($perPage);

return view('displayHackers', compact('hackers', 'search', 'sortField',


'sortOrder', 'perPage'));
}

// display hackers data


<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hackers Data</title>
<style>

body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(to right, #1e3c72, #2a5298);
color: #ffffff;
}

h1 {
text-align: center;
margin: 20px 0;
color: #f8f8f8;
}

.container {
width: 90%;
margin: 0 auto;
max-width: 1200px;
}

.filter-form {
display: flex;
justify-content: space-between;
align-items: center;
background: #ffffff;
padding: 15px 20px;
border-radius: 8px;
margin-bottom: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
color: #333;
}

.filter-form label {
margin-right: 10px;
font-weight: bold;
}

.filter-form input,
.filter-form select,
.filter-form button {
padding: 8px 12px;
border-radius: 6px;
border: 1px solid #ddd;
font-size: 14px;
color: #333;
}

.filter-form select {
background-color: #f8f8f8;
}

.filter-form button {
background-color: #3182ce;
color: #ffffff;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}

.filter-form button:hover {
background-color: #2563eb;
}

table {
border-collapse: collapse;
width: 100%;
background: #f9f9f9;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

th, td {
border: 1px solid #ddd;
padding: 12px 15px;
text-align: left;
}

td{
color: #4d4d4d;
}
th {
background-color: #2a5298;
color: #ffffff;
}

tr:nth-child(even) {
background-color: #f9f9f9;
}

tr:hover {
background-color: #e5e5e5;
}

.pagination {
display: flex;
justify-content: center;
list-style: none;
padding: 15px 0;
}

.pagination li {
margin: 0 5px;
}

.pagination li a {
text-decoration: none;
padding: 8px 12px;
background-color: #3182ce;
color: #ffffff;
border-radius: 6px;
}

.pagination li a:hover {
background-color: #2563eb;
}
</style>
</head>

<body>
<div class="container">
<h1>Hackers Data</h1>

<!-- Filters Form -->


<form class="filter-form" method="GET"
action="{{ route('[Link]') }}">
<div>
<label for="search">Search:</label>
<input type="text" name="search" id="search" value="{{ $search }}"
placeholder="Search by name, alias...">
</div>

<div>
<label for="sortField">Sort by:</label>
<select name="sortField" id="sortField">
<option value="id" {{ $sortField === 'id' ? 'selected' :
'' }}>ID</option>
<option value="name" {{ $sortField === 'name' ? 'selected' : ''
}}>Name</option>
<option value="alias" {{ $sortField === 'alias' ? 'selected' :
'' }}>Alias</option>
<option value="specialty" {{ $sortField === 'specialty' ?
'selected' : '' }}>Specialty</option>
<option value="country" {{ $sortField === 'country' ?
'selected' : '' }}>Country</option>
</select>
</div>

<div>
<label for="sortOrder">Order:</label>
<select name="sortOrder" id="sortOrder">
<option value="asc" {{ $sortOrder === 'asc' ? 'selected' :
'' }}>Ascending</option>
<option value="desc" {{ $sortOrder === 'desc' ? 'selected' : ''
}}>Descending</option>
</select>
</div>

<div>
<label for="perPage">Entries per page:</label>
<select name="perPage" id="perPage">
<option value="5" {{ $perPage == 5 ? 'selected' : ''
}}>5</option>
<option value="10" {{ $perPage == 10 ? 'selected' : ''
}}>10</option>
<option value="25" {{ $perPage == 25 ? 'selected' : ''
}}>25</option>
<option value="50" {{ $perPage == 50 ? 'selected' : ''
}}>50</option>
</select>
</div>

<button type="submit">Apply</button>
</form>

<!-- Table -->


<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Alias</th>
<th>Specialty</th>
<th>Country</th>
<th>Achievement</th>
</tr>
</thead>
<tbody>
@forelse($hackers as $hacker)
<tr>
<td>{{ $hacker->id }}</td>
<td>{{ $hacker->name }}</td>
<td>{{ $hacker->alias }}</td>
<td>{{ $hacker->specialty }}</td>
<td>{{ $hacker->country }}</td>
<td>{{ $hacker->notable_achievement }}</td>
</tr>
@empty
<tr>
<td colspan="6" style="text-align: center;">No records
found</td>
</tr>
@endforelse
</tbody>
</table>

<!-- Pagination -->


<div>
{{ $hackers->appends(request()->query())->links() }}
</div>
</div>
</body>

</html>

You might also like