Laravel无限滚动用于分页输出 [英] Laravel infinite scroll for pagination output

问题描述

我是laravel的新手，正在从事基于laravel 4.2版的项目.使用滚动而不是默认分页加载更多结果时遇到一些问题.我知道有jQuery插件可以帮我解决这个问题，但是这些插件或网络中建议的方法都不能帮到我.

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.

这是我的代码:

laravel模型

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

laravel控制器

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

查看刀片

 <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>

直到这里，一切正常.它创建ul.pagination并为每个页面加载特定的结果.但是我应该如何恰好使用 infiniteScroll 或 jScroll 插件隐藏分页并通过滚动加载更多表格结果?

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 ?

推荐答案

我使用Laravel 5分页进行了无限滚动.我希望这可以帮助您或其他任何人.

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

javascript文件

    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);
                    }
                });
            }
        }
    }

部分视图文件(提供项目)

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

仪表板控制器文件

 /*
        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,
            ]);
        }
    }

主视图文件

<!-- 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>

这篇关于Laravel无限滚动用于分页输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！