Add 'See More…' link in a list web part after certain items

Question

I have a Share Point 2013 'list web part' on my page. This list web part shows all the items in the list. I want to add a JavaScript in the Miscellaneous > JS link window when we are editing a web part. This JavaScript should put 'See More...' after 8 items.

When I click on 'See More...' it will take me to a separate page that will have the full list in a web part. This part I have done. I just need the above described JavaScript functionality.

I have added the following Java Script:

 (function () {


  var itemCount = 0;

function renderListItemTemplate(renderCtx) {
itemCount += 1;

    //if(excludeRows.indexOf(renderCtx.CurrentItemIdx) > -1)
    if (itemCount > 8)
    {
       return ''; //do not render row
    }


    return RenderItemTemplate(renderCtx); 
}


function registerListRenderer()
{
   var context = {};
   context.Templates = {};
   context.Templates.Item = renderListItemTemplate;

   SPClientTemplates.TemplateManager.RegisterTemplateOverrides(context);
} 
ExecuteOrDelayUntilScriptLoaded(registerListRenderer, 'clienttemplates.js');

})();

this only shows 8 items in a list. Now I need to add 'See More...' after the 8th item. Which when clicked would take me to a page that has the whole list.

Much obliged.

Answer 1

Below is the code that I had implemented to get See More... after certain number of items.

function renderListItemTemplate(renderCtx) {
itemCount += 1;

    if (itemCount > 8)
    {

        if($('#seeMoreId').length == 0){
        $('.html tag where we want the SeeMore...').append('<div><p id="seeMoreId"><a href="link to where ever">See More...</a></p></div>');
        }
       return ''; //do not render row

    }

    return RenderItemTemplate(renderCtx); 
}

Any suggestions or recommendations are greatly appreciated.

Thanks to every one.