AJAX pagination in Laravel 7 (Internal Server Error) - php

Question

I am using Laravel 7 and I want to use ajax for my pagination so that it would not refresh the whole page when I click for the next page. I searched up to solve my problem but it was not working and it would not go to the fetch() whenever I error_log() in controller. Whenever I click on page 2 it would error. In the console the error shown is:
app.js:16437 GET http://127.0.0.1:8000/ledger/fetch?page=2 500 (Internal Server Error)
In the storage/logs/laravel.log
[previous exception] [object] (BadMethodCallException(code: 0): Method Illuminate\\Database\\Eloquent\\Collection::links does not exist. at C:\\xampp\\htdocs\\final_Financial\\fin_book_09\\vendor\\laravel\\framework\\src\\Illuminate\\Support\\Traits\\Macroable.php:103)
LedgerController.php
public function index(Request $request)
{
$disableLedger = true;
$ledger = Ledger::orderBy('id', 'DESC')
->where('user_id', auth()->user()->id)
->paginate(5);
$ledgerCatType = DB::table('ledgers')
->orderBy('ledgers.id', 'DESC')
->join('categories', 'ledgers.cat_id', '=', 'categories.id')
->where('ledgers.user_id', auth()->user()->id)
->get('categories.type');
$category = Category::where('user_id', auth()->user()->id)->get();
return view('ledgers.index', [
'ledgers' => $ledger,
'categories' => $category,
'disableLedger' => $disableLedger,
'ledgerCatType' => $ledgerCatType
]);
}
function fetch(Request $request)
{
if ($request->ajax())
{
$ledger = Ledger::orderBy('id', 'DESC')
->where('user_id', auth()->user()->id)
->paginate(5);
$ledgerCatType = DB::table('ledgers')
->orderBy('ledgers.id', 'DESC')
->join('categories', 'ledgers.cat_id', '=', 'categories.id')
->where('ledgers.user_id', auth()->user()->id)
->get('categories.type');
$category = Category::where('user_id', auth()->user()->id)->get();
return view('ledger.entries', compact('ledger', 'categories', 'ledgerCatType'))->render();
}
}
script
$(document).ready(function () {
$('.pagination a').on('click', function(event) {
event.preventDefault();
var page = $(this).attr('href').split('page=')[1];
fetch(page);
})
function fetch(page) {
$.ajax({
url : '/ledger/fetch?page='+page,
success : function(data)
{
$('#ledger-entry').html(data);
},
error : function(){
alert("error!!!!");
}
});
}
});
under the folder ledgers which will be called in the index.blade.php
entries.blade.php
<div class="outer-cont">
<table class="table container inner-cont">
<thead>
<th scope="col">Date</th>
<th scope="col">Description</th>
<th scope="col">Category</th>
<th scope="col">Amount</th>
<th scope="col"></th>
</thead>
<tbody>
#for($i = 0; $i < count($ledgers); $i++)
<tr scope="row">
<td class="tbl-date">{{ $ledgers[$i]->month }} {{ $ledgers[$i]->day }}, {{ $ledgers[$i]->year }}</td>
<td class="tbl-desc">{{ $ledgers[$i]->description }} </td>
<td>{{ $ledgers[$i]->category}} </td>
#if($ledgerCatType[$i]->type == "Expense")
<td class="tbl-amount" style="color: #FF5349;">Php ({{ $ledgers[$i]->amount }})</td>
#else
<td class="tbl-amount" style="color: #3BC23E;">Php {{ $ledgers[$i]->amount }}</td>
#endif
</tr>
#endfor
</table>
</div>
<div class="pagination">{!! $ledgers->links() !!}</div>
index.blade.php
<div id="ledger-entry">
#include('ledgers.entries')
</div>
web.php
Route::resource('ledger','LedgerController')->middleware('auth');
Route::get('/ledger/fetch', 'LedgerController#fetch')->middleware('auth');

Answer 1

Okay nevermind, I fixed it. I'm just going to post the answer here in case anyone gets stuck with it too.
The problem was my route, instead of using the resource I manually added the routes:
Route::get('ledger', 'LedgerController#index')->name('ledger.index')->middleware('auth');
Route::post('/ledger', 'LedgerController#store')->name('ledger.store')->middleware('auth');
Route::delete('/ledger/{id}', 'LedgerController#destroy')->name('ledger.destroy')->middleware('auth');
Route::get('/ledger/fetch', 'LedgerController#index')->name('ledger.fetch')->middleware('auth');
I also edited my code for the index() and thus combining it with the fetch() method thus it now looks like this:
public function index(Request $request)
{
$disableLedger = true;
$ledgers = Ledger::orderBy('id', 'DESC')
->where('user_id', auth()->user()->id)
->paginate(10);
$ledgerCatType = DB::table('ledgers')
->orderBy('ledgers.id', 'DESC')
->join('categories', 'ledgers.cat_id', '=', 'categories.id')
->where('ledgers.user_id', auth()->user()->id)
->select('categories.type')
->paginate(10);
$categories = Category::where('user_id', auth()->user()->id)->get();
if ($request->ajax())
{
return view('ledgers.entries', compact('ledgers', 'categories', 'ledgerCatType', 'disableLedger'))->render();
}
return view('ledgers.index', compact('ledgers', 'categories', 'ledgerCatType', 'disableLedger'));
}