Pagination not showing number in Laravel 8 - pagination

I am trying to do use pagination, and it works fine. However, in the pagination, I only see the following.
« Previous Next »
Showing 1 to 10 of 44 results
How can I make the pagination with Laravel so that I can see pagination numbers?
< 1 2 3 4 5 ... etc >
I have 44 rows in my database
Controller
public function daftar()
{
$TMhs = DB::table('mahasiswa')->orderBy('id', 'asc')->paginate(10);
return view('Mahasiswa', ['mhs' => $TMhs]);
}
Blade/View
#foreach($mhs as $i => $DMhs)
<tr>
<td>{{ $i+1+($mhs->perPage()*($mhs->currentPage()-1)) }}</td>
<td>{{$DMhs->nama}}</td>
<td>{{$DMhs->umur}}</td>
<td style="text-align: left;">{{$DMhs->desa}}</td>
<td style="border-left: 1px solid lightblue;">
Edit
|
Hapus
</td>
</tr>
#endforeach
</table>
<div class="tgLuar">
<div class="tgDalam" style="width: 35%; text-align: left">
Halaman: {{ $mhs->currentPage() }}<br>
Jumlah Data : {{ $mhs->total() }}<br>
Data per Halaman : {{ $mhs->perPage() }}<br>
</div>
</div>
<div class="tgLuar">
<div class="tgDalam">
{{ $mhs->links() }}
</div>
</div>

You may call the paginator's useBootstrap method within the boot method of your App\Providers\AppServiceProvider class:
use Illuminate\Pagination\Paginator;
public function boot()
{
Paginator::useBootstrap();
}
https://laravel.com/docs/8.x/pagination#using-bootstrap

i customize it my self. I change
{{ $mhs->links() }}
to
<div class="tgLuar">
<div class="tgDalam">
#if($mhs->currentPage() != 1)
«
<
#for($i=1; $i<=$mhs->lastPage(); $i++)
#if($i== $mhs->currentPage()) {
<a class="pranala" ><b>{{ $i }}</b> </a>
#else
{{ $i }}
#endif
#endfor
#if($mhs->currentPage() != $mhs->lastPage())
>
»
#endif
</div>
i hope it will answer someone else who have the same problem

Related

Laravel 8 Livewire refresh data after click|model events

I'm trying to create a simple table list view with laravel and livewire component. I can show the component but when I fire an event (change, wiremodel, click) the dataset is not updating, for example, I have an input text to filter my table, when I write on input the request is firing and component is getting it but component nor re-render with the new information
That's my full view
<header class="header py-6">
<div class="flex justify-between">
<h2 class="font-bold text-2xl text-blue-dark leading-tight">
{{ __('messages.Seizures') }}
</h2>
<div class="flex items-end">
<div class="cursor-pointer">
<i class="fas fa-plus-circle text-blue-light text-3xl"></i>
</div>
<div class="pl-8 flex items-center">
<i class="fas fa-filter text-blue-light text-lg"></i>
<input type="text" name="search" id="search-seizure" class="border border-blue-light rounded-full h-8 ml-1 px-4 text-blue-light" wire:model="filter">
</div>
<div class="pl-8 cursor-pointer" wire:click.prevent="toggleTrash()">
#if( $trash )
<i class="fas fa-trash text-blue-light text-xl"></i><i class="fas fa-toggle-on text-blue-light text-xl"></i>
#else
<i class="fas fa-trash text-gray-400 text-xl"></i><i class="fas fa-toggle-off text-xl text-gray-400"></i>
#endif
</div>
</div>
</div>
</header>
<div class="seizure-page">
<table class="table">
<thead>
<tr>
<th>#sortablelink('date', __('messages.Date'), [], ['class' => 'pr-2'])</th>
<th>{{ __('messages.Duration') }}</th>
<th>#sortablelink('location', __('messages.Location'), [], ['class' => 'pr-2'])</th>
<th>{{ __('messages.Notes') }}</th>
<th width="100px" class="text-right">{{ __('messages.Actions') }}</th>
</tr>
</thead>
<tbody>
#foreach($seizures as $seizure)
<tr class="cursor-pointer">
<td>{{ $seizure->date }}</td>
<td class="w-64">{{ $seizure->duration }}</td>
<td>{{ $seizure->location }}</td>
<td class="truncate-cell">{{ $seizure->note }} </td>
<td class="end">
<div class="flex justify-end">
<button wire:click="" class="btn btn-danger btn-sm px-1"><i class="fas fa-info"></i></button>
<button wire:click="edit({{ $seizure }})" class="btn btn-primary btn-sm px-1"><i class="fas fa-pen"></i></button>
<button wire:click="delete({{ $seizure }})" class="btn btn-danger btn-sm px-1"><i class="fas fa-trash text-warm-red"></i></button>
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
<div class="flex justify-center pt-4">
{{ $seizures->links('vendor.pagination.neurons-unchained') }}
</div>
</div>
And this is the component logic
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Seizure;
use Carbon\Carbon;
use Livewire\WithPagination;
class Seizures extends Component
{
use WithPagination;
public $trash = false;
public $filter;
public function render()
{
//TODO: Get paginate number from user settings
$seizures = Seizure::sortable(['date' => 'desc'])
->whereNull('deleted_at')
->where('note', 'like', '%' . $this->filter . '%')
->paginate(10);
if( $this->trash) {
$seizures = Seizure::sortable(['date' => 'desc'])
->whereNotNull('deleted_at')
->where('note', 'like', '%' . $this->filter . '%')
->paginate(10);
}
return view('livewire.seizure.index')
->with('seizures', $seizures->appends(\Request::except('page')))
->layout('layouts.dashboard');
}
public function delete(Seizure $seizure) {
$seizure->deleted_at = Carbon::now();
$seizure->save();
$this->gotoPage(1);
}
public function toggleTrash () {
$this->trash = !$this->trash;
}
}
The toggle button for show elements in trash has same problem
Many thanks

The DELETE method is not supported for this route. Supported methods: GET, HEAD, POST. when deleting first item

I'm a beginner in Laravel 7. I am trying to create a checkout form when purchasing items. The problem is whenever I try to delete the first item the 'The DELETE method is not supported for this route. Supported methods: GET, HEAD, POST.' shows up. However, I am able to delete the following items under it that I put into the checkout form.
This is my CheckoutController
public function destroy($id)
{
Temp_order::where('id',$id)->delete();
return redirect('checkout')->with('success','Product deleted successfully');
}
And this is the code for the table
<tbody>
#forelse ($order as $item)
<tr>
<td id="item_code">{{ $item->item_code }}</td>
<td class="cart_product_img" id="image">
<img src="" alt="Unavailable" style="width: 70px; height:70px"></img>
</td>
<td id="item_name">
{{ $item->item_name }}
</td>
<td id="price">
₱ {{ number_format($item->price, 2) }}
</td>
<td class="qty" id="qty">
<div class="qty-btn d-flex">
<div class="quantity">
<input type="number" class="qty-text" id="qty" step="1" min="1" max="300" name="quantity" value="{{ $item->quantity }}">
</div>
</div>
</td>
<td id="subtotal">
₱ {{ number_format($item->subtotal, 2) }}
</td>
<td>
<form action="{{ route('checkout.destroy', $item->id) }}" method="post">
#csrf
#method('DELETE')
<button type="submit" class="btn btn-danger btn-sm">Remove</button>
</form>
</td>
</tr>
#empty
<tr>
<td>
<p> NO ITEMS IN CART </p>
</td>
</tr>
#endforelse
</tbody>
And this is my route
Route::get('/', function () {
return view('auth.login');
});
Auth::routes();
Route::get('/home', 'HomeController#index')->name('home');
Route::resource('ordering', 'OrderingController')->middleware('auth');
Route::resource('inventory', 'InventoryController')->middleware('auth');
Route::resource('checkout', 'CheckoutController')->middleware('auth');
Can you help me masters?
Try to update CheckoutController
public function destroy(Temp_order $item)
{
$item->delete();
return redirect('checkout')->with('success','Product deleted successfully');
}

V-Model won't update

I have made a simple Datatable with search input,
Student.js
Vue.component('student-list',{
props: ['students'],
template:`
<div class="table-responsive">
<table class="table table-hover mails m-0 table table-actions-bar">
<thead>
<tr>
<th>10</th>
<th>9</th>
<th>8</th>
<th>7</th>
<th>6</th>
<th>5</th>
<th>4</th>
<th>3</th>
<th>2</th>
<th>1</th>
</tr>
</thead>
<tbody>
<student v-for="student in searchResults" :student="student"></student>
</tbody>
</table>
</div>
`,
computed:
{
searchResults: function(student){
var self = this;
return this.students.filter(
function(student){
if(this.searchQuery == '' || this.searchQuery == null) { return true; }
console.log(this.searchQuery);
return (student.toString().indexOf(this.searchQuery) != -1);
}
);
}
},
// v-if="searchResults(student)"
});
Vue.component('student',{
props: ['student'],
template:`
<tr>
<td>
{{ student.name }} {{ student.lname }}
</td>
<td>
<i class="md-phone"></i>
<i class="ion-woman"></i>
<i class="ion-man"></i>
<i class="ion-android-settings"></i>
</td>
<td>
{{ student.address }}
</td>
<td>
{{ student.totalTopay }}
</td>
<td>
{{ student.lessonsTaken }}
</td>
<td>
{{ student.cancelCount }}
</td>
<td>
{{ student.phone }}
</td>
<td>
{{ student.momPhone }}
</td>
<td>
{{ student.dadPhone }}
</td>
<td>
{{ student.email }}
</td>
</tr>
`
});
new Vue({
el: '#content-page',
data: {
'searchQuery': ''
}
});
HTML
....
<div id="content-page">
<input type="text" id="search" class="form-control" placeholder="Search..." v-model="searchQuery">
</div>
....
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="{{ asset('js/students.js') }}"></script>
...
Now, for some reason whenever I leave the search blank it works as needed, but when I change the input field by typing in the text box(which his v-model is attached to the searchQuery variable), nothing changes, and when I call it (this.searchQuery) on the Dev Tools console, it says undefined. What am I missing?
Thanks in advance everyone!
I've edited your code a little bit to make it work and removed some lines of code, because I don't want to recreate the whole student object.
I passed the search-query as prop and added <student-list /> to your template.
In your filter function I replaced toString with JSON.stringify, because student is an object and toString prints out [object Object].
Also, I changed the props object and added their types.
And one last tiny error:
Interpolation inside attributes has been deprecated. Use v-bind or the
colon shorthand instead.
Don't use href="tel:{{ student.phone }}" use something like this instead :href="'tel:' + student.phone".
Vue.component('student-list',{
props: {
students: {
type: Array
},
searchQuery: {
type: String
}
},
template:`<div class="table-responsive">
searchQuery: {{searchQuery}}
<table class="table table-hover mails m-0 table table-actions-bar">
<thead>
<tr>
<th>10</th>
<th>9</th>
<th>8</th>
<th>7</th>
<th>6</th>
<th>5</th>
<th>4</th>
<th>3</th>
<th>2</th>
<th>1</th>
</tr>
</thead>
<student v-for="student in searchResults" :student="student"></student>
</tbody>
</table>
</div>`,
computed: {
searchResults() {
return this.students.filter(student => JSON.stringify(student).indexOf(this.searchQuery) != -1);
}
},
});
Vue.component('student',{
props: {
student: {
type: Object
}
},
template:`<tr>
<td>
{{ student.name }} {{ student.lname }}
</td>
<td>
<a :href="'tel:' + student.phone" title="התקשר" class="table-action-btn">tel-icon</a>
</td>
</tr>`
});
new Vue({
el: '#content-page',
data: {
'searchQuery': ''
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</head>
<body>
<div id="content-page">
<student-list :search-query="searchQuery" :students="[{
id: 1,
name: 'Peter',
lname: 'Parker',
phone: 12345
},{
id: 2,
name: 'Bat',
lname: 'Man',
phone: 1234
}]"></student-list>
<input type="text" id="search" class="form-control" placeholder="Search..." v-model="searchQuery">
</div>
</body>
</html>
And my second solution
Add this to your computed:
computed: {
searchQuery() {
return this.$parent.searchQuery || '';
},
...
}
...
You access the parent of student-list, but I think this is not a nice way, because you can't see from where do you get this data.
Hope this will help you a little bit.

Angular2 dependent dropdown based on selected value

Here am trying to append a dependent drop down based on value drop down (you can see in my HTML code for value drop down).I have wrote a onchage method to get appear dependent dropdown in html.Here i have dependent drop down for only three(i.e, Services Performed, Products Sold, Gross Retail) selected values of my values dropdown. Now am getting the dependent dropdowns, but when i have change the another drop down i.e, 2nd or 3rd ...etc dropdown ,then the previous drop down is getting disappear and latest changed dropdown value is getting appear.
so, please help me to solve it.
my HTML code is
<table class="table table-bordered-light">
<tbody>
<tr class="grey_th">
<td>Step</td>
<td>Action</td>
<td>Value</td>
<td>Number</td>
<td>Sample Calculation</td>
</tr>
<tr *ngFor="let row of rows; let i = 'index'">
<td [innerHTML]="row.step"></td>
<td>
<select [class.disabled]="i==0" [(ngModel)]="row.operator" name="action" style="width: 100%">
<option *ngFor="let actions of actionsStaticData; let i='index'" value="{{actions.id}}" id="actions{{i}}">{{actions.action}}</option>
</select>
</td>
<td>
<tr>
<td>
<div>
<!-- here i have wrote onchange method **onValueChange()** and passing i also along with the value -->
<
[(ngModel)]="row.operand" style="width: 100%" (change)="onValueChange($event.target.value, i)">
<option *ngFor="let values of valuesStaticData; let i='index'" value="{{values.value}}" id="values{{i}}">{{values.value}}</option>
<option value="-" disabled="disabled">-----</option>
<option *ngFor="let values of scalesData; let i='index'" value="{{values.Id}}" id="values{{i}}">{{values.Name}}</option>
</select>
</div>
</td>
<td>
<div class="ml-15" *ngIf='rowLength == i'>
<select [(ngModel)]="row.operandSubOption" style="width: 100%">
<option *ngFor="let values of servicesList; let i='index'" value="{{values.value}}" id="values{{i}}">{{values.Name}}</option>
</select>
</div>
</td>
</tr>
</td>
<td>
<input type="text" [(ngModel)]="row.numeral">
</td>
<td> {{row.result}}{{toFix}}</td>
<td>
<a style="color: #000;" (click)="addRows()" *ngIf='showPlus == true'>
<span class="f-plus">
<i class="fa fa-plus" aria-hidden="true"></i>
</span>
</a>
<a *ngIf='showPlus == false'>
<!-- <span class="del">
<i class="fa fa-plus disable" aria-hidden="true"></i>
</span> -->
</a>
<a (click)="deleteFieldValue(row, i)" *ngIf='hideDelete==true' data-toggle="tooltip" data-placement="top" title="Remove">
<span class="f-minus">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</span>
</a>
</td>
</tr>
</tbody>
</table>
my typesript code is
onValueChange(value, i) {
if (value === 'Services Performed') {
this.rowLength = i;
this.servicesList = '';
this.setupCompMethodService.getServices()
.subscribe(data => {
this.servicesList = data['result'];
this.rows[i]['operandSubOption'] = this.servicesList[0].Name;
});
}
if (value === 'Products Sold') {
this.rowLength = i;
this.servicesList = '';
this.setupCompMethodService.getInventoryGroupData()
.subscribe(data => {
this.servicesList = data['result'];
this.rows[i]['operandSubOption'] = this.servicesList[0].Name;
});``
}
if (value === 'Gross Retail') {
this.rowLength = i;
this.servicesList = '';
this.setupCompMethodService.getProductLineDetails()
.subscribe(data => {
this.servicesList = data['result'];
this.rows[i]['operandSubOption'] = this.servicesList[0].Name;
});
}
}

Trying to use laravel pagination breaks my controller/view

I'm trying to get Pagination working in Laravel. I've not used pagination before so am trying to use some examples from the docs and google results. I'm wondering if I need to turn 'pagination' on somewhere in config.
Here's my simple working controller:
public function get_index() {
$locations = Location::all();
return View::make('location.index')->with('locations', $locations)->render();
}
When I try and add pagination like this it breaks:
public function get_index() {
$locations = Location::paginate(5);
return View::make('location.index')->with('locations', $locations)->render();
}
..and I get the error:
Unhandled Exception
Message:
Error rendering view: [location.index]
Trying to get property of non-object
Here's my location.index view:
#layout('layouts.blank')
#section('content')
<div class="row">
<div class="twelve columns">
<div role="main" id="content">
<h3>Locations - All</h3>
#if($locations)
<table class="twelve">
<thead>
<tr>
<th style="text-align: left;">Address</th>
<th>Area</th>
<th>Region</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
#foreach($locations as $location)
<tbody>
<tr>
<td style="text-align: left;">{{ $location->company,', ',$location->add_name,', ',$location->add_city }}</td>
<td> – </td>
<td> – </td>
<td>{{ HTML::link('location/update/'.$location->id, '',array('class'=>"foundicon-edit updateicon")) }}</td>
<td>{{ HTML::link('location/delete/'.$location->id, '',array('class'=>"foundicon-remove warnicon")) }}</td>
</tr>
</tbody>
#endforeach
</table>
#else
Looks like we haven't added any locations, yet!
#endif
<p>{{ HTML::link('location/create', 'Create a location', array('class'=>"small radius button")) }}</p>
</div>
</div>
</div>
#endsection
I hadn't read deeply enough into the subject. It's now working and here's what I had to change in the view:
//from:
#foreach($locations as $location)
//to:
#foreach($locations->results as $location)
That returned just 5 results. Then to add links to the footer of my table I added this HTML/Blade:
<tfoot>
<tr>
<td colspan="5"> {{ $locations->links() }} </td>
</tr>
</tfoot>
Hope someone else benefits as I didn't find this terribly clear in the docs.

Resources