Question

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

所以这是我的代码：

laravel模型

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

查看刀片

 <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 插件来隐藏分页并通过滚动加载更多的表格结果？

Answer 1

我用Laravel 5 Pagination做了一个无限卷轴。我希望这可以帮助你或其他任何人。

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无限滚动分页输出

1 个答案: