Home > Microsoft SharePoint, SharePoint2013 > SharePoint 2013: jQuery table pagination sorter integration with JSLink

SharePoint 2013: jQuery table pagination sorter integration with JSLink

Hi Friends,

While working one of the requirements I came across a scenario where I need to call a jQuery function after loading all the rows from data view. I implemented it using OnPostRender which I shown in my previous post.

After that I am thinking of integrating JSLink with some of the very useful jQuery plugin. In this post I am showing how to integrate a jQuery table sorter plugin with SharePoint 2013 JSLink.I have used tablesorter plugin by Christian Bach for demo purpose. http://mottie.github.io/tablesorter/docs/index.html

Download the package from above maintained table sorter site and upload the required css and js under SiteAssets folder on root site.

I have created a custom list with following columns. Added these columns in default view. You can create separate view also.

listsettings1

Added some test contents to show the functionality working.

listscontent

Created one JSLink(Student_Filter_Script.js) file which will alter the UI of the view. JS Link file is as following.

(function () {
var overrideCtx = {};
 overrideCtx.Templates = {};
 overrideCtx.Templates.Header = "<div class='pager'>Page: <select class='gotoPage'></select><img src='/sites/Demo/SiteAssets/addons/pager/icons/first.png' class='first' alt='First' title='First page' /><img src='/sites/Demo/SiteAssets/addons/pager/icons/prev.png' class='prev' alt='Prev' title='Previous page' /><span class='pagedisplay'></span> <!-- this can be any element, including an input --><img src='/sites/Demo/SiteAssets/addons/pager/icons/next.png' class='next' alt='Next' title='Next page' /><img src='/sites/Demo/SiteAssets/addons/pager/icons/last.png' class='last' alt='Last' title= 'Last page' /><select class='pagesize'><option selected='selected' value='10'>10</option><option value='20'>20</option><option value='30'>30</option><option value='40'>40</option></select></div><table id='myTable' class='tablesorter'><thead><tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Hindi</th><th>Calculus</th><th>Geometry</th></tr></thead><tfoot><tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Hindi</th><th>Calculus</th><th>Geometry</th></tr></tfoot><tbody>";
 overrideCtx.Templates.Footer = "</tbody></table><div class='pager'>Page: <select class='gotoPage'></select><img src='/sites/Demo/SiteAssets/addons/pager/icons/first.png' class='first' alt='First' title='First page' /><img src='/sites/Demo/SiteAssets/addons/pager/icons/prev.png' class='prev' alt='Prev' title='Previous page' /><span class='pagedisplay'></span> <!-- this can be any element, including an input --><img src='/sites/Demo/SiteAssets/addons/pager/icons/next.png' class='next' alt='Next' title='Next page' /><img src='/sites/Demo/SiteAssets/addons/pager/icons/last.png' class='last' alt='Last' title= 'Last page' /><select class='pagesize'><option selected='selected' value='10'>10</option><option value='20'>20</option><option value='30'>30</option><option value='40'>40</option></select></div>";
 overrideCtx.Templates.Item = CustomDemoItem;
 overrideCtx.OnPostRender = [];
 overrideCtx.OnPostRender.push(function(){ /* invoke your plugin code here to ensure the plugin has the content to work against */
 $(function(){

// define pager options
 var pagerOptions = {
 // target the pager markup - see the HTML block below
 container: $(".pager"),
 // output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
 output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
 // if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
 // table row set to a height to compensate; default is false
 fixedHeight: true,
 // remove rows from the table to speed up the sort of large tables.
 // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
 removeRows: false,
 // go to page selector - select dropdown that sets the current page
 cssGoto: '.gotoPage'
 };

// Initialize tablesorter
 // ***********************
 $("table")
 .tablesorter({
 theme: 'blue',
 headerTemplate : '{content} {icon}', // new in v2.7. Needed to add the bootstrap icon!
 widthFixed: true,
 widgets: ['zebra', 'filter']
 })

// initialize the pager plugin
 // ****************************
 .tablesorterPager(pagerOptions);

});
 });
 SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function CustomDemoItem(ctx)
{
 var html = "";
 html = "<tr>";
 html += "<td>" + ctx.CurrentItem.Title + "</td>";
 html += "<td>" + ctx.CurrentItem.Name + "</td>";
 html += "<td>" + ctx.CurrentItem.Sex + "</td>";
 html += "<td>" + ctx.CurrentItem.English + "</td>";
 html += "<td>" + ctx.CurrentItem.Hindi + "</td>";
 html += "<td>" + ctx.CurrentItem.Calculus + "</td>";
 html += "<td>" + ctx.CurrentItem.Geometry + "</td>";
 html += "</tr>";
 return html;
}

Uploaded this JS link file in master page gallery with properties as shown in bellow image.

JsLink_MasterPageGallery

I have added references for following css and JavaScript files in page layout, I have added in page layout but you can add in master page according to your requirement.

<!-- jQuery file -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<!-- css stylesheet refrences -->
<link href="/sites/Demo/SiteAssets/css/theme.blue.css" rel="stylesheet" type="text/css" />
<link href="/sites/Demo/SiteAssets/addons/pager/jquery.tablesorter.pager.css" rel="stylesheet" type="text/css" />
<!-- Tablesorter js -->
<script type="text/javascript" src="/sites/Demo/SiteAssets/js/jquery.tablesorter.js"></script>&nbsp;
<script type="text/javascript" src="/sites/Demo/SiteAssets/addons/pager/jquery.tablesorter.pager.js"></script>
<script type="text/javascript" src="/sites/Demo/SiteAssets/js/jquery.tablesorter.widgets.js"></script>

Edit the page to add list view web part on page and edit the XSLTListView web part to set newly created JS link file.

XSLT_JSLink_ref

Set the value as following.

~sitecollection/_catalogs/masterpage/JS_Link/Student_Filter_Script.js

Save the web part and you will see the beautiful effect of smooth client side sorting pagination, filtering and sorting using a JSLink file.

JSLinkView

Note: complete contribution, development and license rights are with the team who have developed tablesorter plugin. This post is just to show integration of SharePoint 2013 JSLink with jQuery plugin.

Advertisements
  1. January 26, 2014 at 11:47 am
  2. Quadri
    February 6, 2015 at 8:56 am

    How do you address the menu context after the title(Name). it appears to be showing unidentified for me.

    • February 12, 2015 at 6:12 am

      Hi,

      Please check for null in JS and handle it with empty or blank space.

      Regards,
      Prasad Pathak

  3. TT
    November 20, 2015 at 4:41 pm

    How would you do this in SharePoint 2010 or without JS link options.

    • December 1, 2015 at 11:31 am

      Hi,

      Instead of using JS link, you can use JS client side object model to fetch the data from list and use similar code from my post to form the HTML.

      Regards,
      Prasad Pathak

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: