Laravel infinite scroll for pagination output

Question

I'm new to laravel and I'm working on a project based on laravel version 4.2. I've got some problems with loading more results using scroll instead of default pagination. I know there are jQuery plugins that can help me out in this, but none of them or suggested ways in web could help me out well.

so here is my code :

laravel model

//inside a AdGenerator class
public function allAds(){
    $allAds = DB::table('infos')->paginate(10);
    return $allAds;
}

laravel controller

//inside controller
$ads = new AdGenerator();
$allAds = $ads->allAds();
return View::make('view')->with(array(
    'ads'=>$allAds,
));

view blade

 <table id="ActivationTable" class="table table-striped table-responsive">
    <tr>
        <th class="col-xs-1">Number</th>
        <th class="col-xs-4">Title</th>
        <th class="col-xs-2">Field</th>
        <th class="col-xs-1">IP</th>
        <th class="col-xs-2">Time</th>
        <th class="col-xs-1">Status</th>
        <th class="col-xs-1">Check</th>
    </tr>
        @foreach($ads as $ad)
            <tr class="box" data-table="{{$ad->tableName}}">
                <td></td>
                <td>{{$ad->id}} - {{$ad->title}}</td>
                <td>{{$ad->tableName}}</td>
                <td>{{$ad->ip}}</td>
                <td>{{$ad->postTimeConverted}}</td>
                @if($ad->active == 1)
                    <td><span class="text-success">active</span></td>
                @else
                    <td><span class="text-danger">not active</span></td>
                @endif
            </tr>
        @endforeach
            {{ $ads->links() }}
            <div id="here"></div>
</table>

Till here , everything works fine . It creates ul.pagination and loads specific results for each page. but how should I exactly use infiniteScroll or jScroll plugins to hide pagination and load more table results by scrolling ?

Cardiff

Answer 1

I have made a infinit scroll with the Laravel 5 Pagination. I hope this can help you or anybody else.

The javascript file

    var infinitScroll = function (options) {
        var event = options.event ? options.event : 0;
        var count = options.count ? options.count : 1;
        var didGetData = true;

        $(window).on('scroll', function () {
            console.log("scroll");
            if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
                loadMore();
                count++;
            }
        }).scroll();

        function loadMore() {
            var url = "/dashboard/posts/" + event + "?page=" + count
            if (didGetData) {
                $('#load').show();
                $.ajax({
                    type: "GET",
                    url: url,
                    success: function (response) {
                        if (response) {
                            didGetData = true;
                            $('.scroll').append(response);
                        } else {
                            didGetData = false;
                        }
                        $('#load').hide();
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        console.log(errorThrown);
                        console.log(textStatus);
                    }
                });
            }
        }
    }

Partial view file (Looping out items)

@foreach($posts as $post)
<div class="column preview">
    <img src="{{$post->url}}" class="thumbnail" alt="">
</div>
@endforeach

Dashboard controller-file

 /*
        VIEW EVENT PAGE
    */
    public function getEvent($id) {
        $user = Auth::user();
        $event = Festivity::find($id);
        $postcount = Post::where('owner_event', $event->id)->count();

        if (($event === null) || ($event->owner_company !== $user['id'])) {
            return redirect('/dashboard', ['error' => 'Event not found or you dont har premission']);    
        } else {
            $events  = Festivity::where('owner_company', $user['id'])->orderBy('title')->get();

            return view('dashboard/view', [
                'postcount' => $postcount,
                'events' => $events, 
                'event' => $event, 
            ]);
        }
    }

    /*
        GET POSTS FOR EVENTS
    */

    public function getPosts($id) {
        $user = Auth::user();
        $event = Festivity::find($id);

        if (($event === null) || ($event->owner_company !== $user['id'])) {
            return redirect('/dashboard', ['error' => 'Event not found or you dont har premission']);    
        } else {
            $posts = Post::where('owner_event', $event->id)->Paginate(10);
            return view('dashboard/posts', [
                'posts'=> $posts,
            ]);
        }
    }

Main view file

<!-- Recent posts -->
        <div class="columns large-12 medium-12 small-12 recent">
            <h4>Recent posts <small>({{$postcount}})</small></h4> @if($postcount === 0)
            <h2>No posts to show!</h2> @else
            <div class="columns small-6 right" data-sticky-container>
                <div class="sticky" data-sticky data-anchor="#foo">
                    <img class="thumbnail" src="assets/img/generic/rectangle-3.jpg"> Just a bunch of random stuff
                </div>
            </div>

            <div class="scroll small-up-2 medium-up-4 large-up-4">

            </div>
            <div id="load">
                <div class="loader">Loading...</div>
            </div>
            @endif
        </div>

<script type="text/javascript" src="{{ asset('/..path_to../infinitescroll.js') }}"></script>
<script>
    infinitScroll({event: {{$event->id}}})
</script>

Negate

Thank you. I faced this problem 6months ago and I wrote my own infinite scroll for that considering SEO. I hope this helps someone else too :) – Cardiff