See More Records on click of button Salesforce.com

 

Controller:

public with sharing class SeeMoreValues {    

    @RemoteAction

    public static List<Contact> diplayData(){

        List<Contact> newContact = [select name,id from contact limit 15];

        return newContact;

        

    }

}

Visualforce Page:

<apex:page controller="SeeMoreValues">

    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"/>  

    <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>   

    <style>       

        #more1{

            cursor: pointer;

            background: #eee;

        }        

    </style>                                              

    <script>

    var numShown = 5; 

    var numMore = 5;

    var numRows; 

    var $table;             

    var dataStorage = new Array();                   

        var mytable = $('<table class="table table-striped table-bordered tablesorter" border="2" cellspacing="0" cellpadding="0" width="100%" id="example"></table>').attr({ id: "basicTable" });         

        $(document).ready(function(){

            $("#submitButton").hide();

            Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.SeeMoreValues.diplayData}',function(result,event){                                               

                 dataStorage = result;                                  

                 for(var i=0;i<result.length;i++){                                        

                     var row = $('<tr></tr>').appendTo(mytable);                                                          

                     $('<td class="dfc">'+result[i].Name+'</td>').appendTo(row); 

                     $('<td class="dfc">'+result[i].Id+'</td>').appendTo(row);                                                                                                                               

                 }                               

                 mytable.appendTo("#box");

                 $table = $('#box').find('tbody');  // tbody containing all the rows

                 numRows = $table.find('tr').length; // Total # rows 

                 $table.find('tr:gt(' + (numShown-1) + ')').hide().end().after('<tbody onclick="more();" id="more1"><tr><td colspan="'+$table.find('tr:first td').length +'"><div>Show <span>' +

                 numMore + '</span> More</div></tbody></td></tr>');                                                                                                                 

            },{escape:true});                          

        });

        

        function more(){

            numShown = numShown + numMore;

            console.log('numShown----------'+numShown);

            if (numShown >= numRows) {

                $('#more1').remove();

            }

            if (numRows - numShown < numMore) {

                $('#more1 span').html(numRows - numShown);

            }

            $table.find('tr:lt(' + numShown + ')').show();

            $('#submitButton').show();

        }

        function less(){

            for(i=0 ; i < 3 ; i++ ){

                $('#box tr:last').remove();

            }                                                            

        }                       

    </script> 

     <div id='box'>       

    </div> 

    <button type="button" id="submitButton" onclick="less();">SeeLess</button>             

</apex:page>