Level 7
I fixed the design problem by calling the class on the table... Durh :) Still have the problem with it first appearing after i click once, and it's not changeing pages visual.
Jan 27, 2016
9
Level 7
Laravel Ajax pagination
I'm following a guide on how to make the pagination called with Ajax, but i', having a little trouble 3 problems one:
- It first shows up after i click, on one of the links() in the pagination
- The pagination's links() dosn't move it's just on one.
- the style in the table are not correct at all, but im gusseing that cause it comes inside the tag I'm using to call it
Here are my code: (I'm trying to show the tasks assigned to a user, on the users page.)
The scipt on Users show page
<script>
// Ajax pagination
$(document).on('click', '.pagination a', function (e) {
e.preventDefault();
var page = ($(this).attr('href').split('page=')[1]);
getTasks(page);
});
function getTasks(page) {
console.log('Tasks page =' + page);
$.ajax({
url: '/rockcrm/public/ajax/tasks/test?page=' + page
}).done(function(data) {
$('.clients').html(data);
});
}
</script>
Tasks/test.blade.php
@foreach($tasks as $task)
<tr>
<td>
<a href="{{ route('tasks.show', $task->id)}}">
{{ $task->title }}
</a> </td>
<td>{{date('d, F Y, H:i:s', strTotime($task->created_at))}} </td>
<td>{{date('d, F Y', strTotime($task->deadline))}}({{ $task->days_until_deadline }})</td>
</tr>
@endforeach
{!! $tasks->links()!!}
Users show page
<table class="table table-hover sortable">
<h3>Open tasks ({{$user->tasksAssign->count()}})</h3>
<thead>
<thead>
<tr>
<th>Title</th>
<th>Created at</th>
<th>Deadline</th>
</tr>
</thead>
<tbody>
<tr class="clients"></tr>
</tbody>
</table>
{!! $tasks->links()!!} //This is the one im click to make the data appear
And last the route
Route::get('/ajax/tasks/test', function ()
{
$user = User::with('tasksAssign')->firstOrFail();
$tasks = $user->tasksAssign()->paginate(2);
return view('tasks.test', compact('user', 'tasks'))->render();
});
Level 7
Any suggstions, anyone?
Level 6
Did you consider using datatables, they saved me a lot of time and headache.
Try this one https://github.com/yajra/laravel-datatables and here is their web site with great tutorials https://github.com/yajra/laravel-datatables
1 like
Level 7
Hmm thats exactly what i've been looking for, i will look into it! Thanks
Level 7
@moharrum Dont know how experinced you are with this package, but i'm just gonna hijack my own post here, I've followed the tutorial, but i'm not getting any data in the view
Route
Route::group(['middleware' => ['web', 'auth']], function () {
Route::controller('users', 'UsersController', [
'anyData' => 'users.data',
'getIndex' => 'users',
]);
Route::resource('users', 'UsersController');
});
My view
@extends('layouts.master')
@section('heading')
<h1>All Users</h1>
@stop
@section('content')
<table class="table table-bordered" id="users-table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Created At</th>
<th>Updated At</th>
</tr>
</thead>
</table>
@stop
@push('scripts')
<script>
$(function() {
$('#users-table').DataTable({
processing: true,
serverSide: true,
ajax: '{!! route('users.data') !!}',
columns: [
{ data: 'id', name: 'id' },
{ data: 'name', name: 'name' },
{ data: 'email', name: 'email' },
{ data: 'created_at', name: 'created_at' },
{ data: 'updated_at', name: 'updated_at' }
]
});
});
</script>
@endpush
Controller
public function index()
{
return view('users.index');
}
public function anyData()
{
return Datatables::of(User::select('*'))->make(true);
}
Also just a note to everyone i would still like to know what wrong with my first problem :)
Level 6
Hmmm @cawex your view and and route setup seems fine, in you controller try using the full path to the User model and the Datatables facade :
public function index()
{
return view('users.index');
}
public function anyData()
{
return \Yajra\Datatables\Datatables::of(\App\User::select('*'))->make(true);
}
Listening to network responses maybe useful to understand the error, install Web Developer extension in Firefox and go to Tools -> Web Developer -> Network, refresh the page and your Ajax request will appear, double click it and view responses tab, that should explain the error.
Level 7
@moharrum Tried it dindt work sadly :/, I'm useing the network tab in chrome, and i dont actully see my ajax call now that you mention it. Not sure why.
Level 6
@cawex if you see no request that means you either did not include juery and jquery.datatables in your html page or you did not make the request probably, make sure you include jquery, jquery.datatables js and css files and post the page source.
Level 7
Please or to participate in this conversation.