I am developing a custom plugin component like this but not having any idea about PAGING in octoberCMS

   <?php namespace Akhil\Vh1\Components;    
use Cms\Classes\ComponentBase;
use Akhil\Vh1\Models\MusicReview as modelMusicReview;
use DB;    
class Music extends ComponentBase
{    
    public function componentDetails()
    {
        return [
            'name'        => 'Music Component',
            'description' => 'Default values for music component'
        ];
    }

    public function defineProperties()
    {
        return [];
    }
            public function listReviewsMusicOnVh1s(){
           return $modelMusicReview = modelMusicReview::where('published', '=', 1)
                            ->where('published', '=', 1)
                            ->where('is_deleted', '=', 0)
                            ->orderBy('created_at', 'desc')
                            ->skip(0)
                            ->take(3)
                            ->get();
         }

////////////////////

             Now accessing this with component  {% partial 'musicComponent::listReviewsMusicOnVh1s' %} 
             My listReviewsMusicOnVh1s.htm have following code ........
             {% for listReviewsMusicOnVh1 in musicComponent.listReviewsMusicOnVh1s %}
<div class="four columns home-review" style="float:left; min-height:220px;">            
        <h5 class="home-review-title">{{ listReviewsMusicOnVh1.name }}</h5>
</div>

{% endfor %}

Have a look at the rainlab.blog plugin: https://github.com/rainlab/blog-plugin/blob/master/components/Posts.php#L131-L157

It also handles forntend pagination.

Thanks alxy. I have implemented the paging as per given example.......... but can you plz guide me on how i will use paging in a component while combining two tables like below

               protected function listPosts()
{
    $posts = DB::select(DB::raw("
             (SELECT avmfic.`id` AS id, avmfic.`name` AS name, avmfic.`alias` AS alias, sf1.`file_name` AS           file_name, concat('music_features_interview_categories','') AS `type`, avmfic.created_at AS created_at,   sf1.attachment_type AS attachment_type, avmfic.content AS content
                FROM akhil_vh1_music_features_interview_categories avmfic
                INNER JOIN `system_files` sf1 
                ON (sf1.attachment_id = avmfic.id)
                WHERE sf1.attachment_type = :vmodel1
                AND sf1.field = 'image'
                AND avmfic.`published` = 1 
                AND avmfic.`is_deleted` = 0)
             UNION 
             (SELECT avmflc.`id` AS id, avmflc.`name` AS name, avmflc.`alias` AS alias, sf2.`file_name` AS file_name, concat('music_features_list_categories','') AS `type`, avmflc.created_at AS created_at, sf2.attachment_type AS attachment_type, avmflc.content AS content
                FROM akhil_vh1_music_features_list_categories avmflc
                INNER JOIN `system_files` sf2 
                ON (sf2.attachment_id = avmflc.id)
                WHERE sf2.attachment_type = :vmodel2
                AND sf2.field = 'image'
                AND avmflc.`published` = 1 
                AND avmflc.`is_deleted` = 0)
             ORDER BY created_at DESC") , array(    'vmodel1'=>'Akhil\Vh1\Models\MusicFeaturesInterviewCategory',
                                                  'vmodel2'=>'Akhil\Vh1\Models\MusicFeaturesListCategory') 
    );
    return  Paginator::make($posts, count($posts), $this->perPage);

}

But paging is not working..........

My default partial

           <div class="row review-row" id="two-section">
{% for post in posts %}
    <div class="six columns">
        <div class="features">
            <a href="{{ post.url }}"><img 
            src="{{ getImageTwig(post.id,post.attachment_type).image.thumb(350,350,'crop') }}" 
            alt="{{ getImageTwig(post.id,post.attachment_type).image.title }}" 
            title="{{ getImageTwig(post.id,post.attachment_type).image.description }}"/>
            <h6 class="list-title">{{ posts.getLastPage }}{{ post.name}}</h6></a>
            <p>{{ post.description|striptags }}<br>
            {{ posts|length }}+{{ posts.getCurrentPage }} -{{ posts.getLastPage }}- {{ noOfPageLinks }}
            <a href="{{ post.url }}" class="read-more">Read More</a></p>
        </div>
    </div>
{% else %}
    <div class="no-data">{{ noPostsMessage }}</div>
{% endfor %}