pagination for Thousands of records

I am creating an application (PHP/Laravel) that read a Thousands of files (>5000) and display its content in a datatable like, the problem i face is the page loading is very slow (an average of 3 minutes).

Is there a way i can display just say 50 records to clients and let the processing be done behind the scene till user to watching those 50 records? or is there a way i can just display about 50 records and on next click, i can do pagination then for next 50 records for the user and display it. what is the best way. Here is what i did so far:

public function getMails(){
            $type = INPUT::get("type");

     $result = [];

           $all_files = Storage::allFiles('boite/'.$type);

            foreach ($all_files as $file){
                $file_content = Storage::get($file);


                preg_match_all('/x\-sender\:(.+?)\n/s',$file_content, $matches_);
                $x_sender = trim( $matches_[1][0] );

                preg_match_all('/Subject\:(.+?)\n/s',$file_content, $matches__);
                $subject = trim( $matches__[0][0] );

                preg_match_all('/x\-receiver\:(.+?)\n/s',$file_content, $matches);

                array_push($result, (object)["file_name"=> $file    ,"x_sender"=>$x_sender, "content"=>$file_content, "subject"=>$subject]);

            return view('list',compact('result'));
        }

and this my view:

@foreach($result as $mail)
    <li data-fname="">
        <div class="md-card-list-item-menu" data-uk-dropdown="{mode:'click',pos:'bottom-right'}">
            <a href="#" class="md-icon material-icons">&#xE5D4;</a>
            <div class="uk-dropdown uk-dropdown-small">
                <ul class="uk-nav">
                    <li class="delete_mail"><a href="#"><i class="material-icons">&#xE872;</i> Delete</a></li>
                </ul>
            </div>
        </div>
        <span class="md-card-list-item-date"></span>
        <div class="md-card-list-item-select">
            <input type="checkbox" data-md-icheck />
        </div>

        <div class="md-card-list-item-sender">
            <span></span>
        </div>
        <div class="md-card-list-item-subject">
            <div class="md-card-list-item-sender-small">
                <span></span>
            </div>
            <span></span>
        </div>
        <div class="md-card-list-item-content-wrapper">
            <div class="md-card-list-item-content" >
                {!! nl2br($mail->content) !!}
            </div>
        </div>
    </li>
@endforeach

via GENE