Introduction:


Here we will discuss how we can add header and footer into a list view web part using JSLink in SharePoint 2013 or SharePoint 2016 or SharePoint Online. Here we have a list known as Trainings and let us add the list on a web part page.

Background:


By default if you will put a list on a web part page, it will look like below:



Now add the below code and save it in the .js file. You can add it inside Site Asset library also.

(function () {
 
    var overrideContext = {};
 
    overrideContext.Templates = {};
 
    overrideContext.Templates.Header = overrideCustomHeader;
 
    overrideContext.Templates.Footer = overrideCustomFooter;
 
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
 
})();
 
function overrideCustomHeader() {
 
    return "<h3>Our Custom Header</h3>";
 
}
 
function overrideCustomFooter() {
 
    return "<h3>Our Custom Footer</h3>";
 
}

Then let us edit the list view web part and you can see the JS Link and you can put the JS Link path like below:




~site/SiteAssets/JSLinkHeaderFooterTest.js

After you save the page, you can see the header and footer like below:



References:


Conclusion:


Here we have seen how we can add header and footer in list view web part using JSLink in SharePoint 2013.