SharePoint

SharePoint 2013: jQuery Table Pagination Sorter Integration With JSLink

While working one of the requirements I came across a scenario where I needed to call a jQuery function after loading all the rows from the data view. I implemented it using OnPostRender.

After that I was thinking of integrating JSLink with some of the very useful jQuery plugins. In this article I am showing how to integrate a jQuery table sorter plugin with SharePoint 2013 JSLink. I have used the tablesorter plugin by Christian Bach for demo purposes.

http://mottie.github.io/tablesorter/docs/index.html

Download the package from the preceding maintained table sorter site and upload the required CSS and JavaScript under the SiteAssets folder on the root site.

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



Then added some test contents to show the functionality working.



Created one JSLink (Student_Filter_Script.js) file that will alter the UI of the view. The JavaScript Link file is as in the following.

  1. (function () {  
  2. var overrideCtx = {};  
  3.  overrideCtx.Templates = {};  
  4.  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>";  
  5.  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>";  
  6.  overrideCtx.Templates.Item = CustomDemoItem;  
  7.  overrideCtx.OnPostRender = [];  
  8.  overrideCtx.OnPostRender.push(function(){ /* invoke your plugin code here to ensure the plugin has the content to work against */  
  9.  $(function()
  10. {   
  11. // define pager options  
  12.  var pagerOptions = {  
  13.  // target the pager markup - see the HTML block below  
  14.  container: $(".pager"),  
  15.  // output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}  
  16.  output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',  
  17.  // if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty  
  18.  // table row set to a height to compensate; default is false  
  19.  fixedHeight: true,  
  20.  // remove rows from the table to speed up the sort of large tables.  
  21.  // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.  
  22.  removeRows: false,  
  23.  // go to page selector - select dropdown that sets the current page  
  24.  cssGoto: '.gotoPage'  
  25.  };  
  26.   
  27. // Initialize tablesorter  
  28.  // ***********************  
  29.  $("table")  
  30.  .tablesorter({  
  31.  theme: 'blue',  
  32.  headerTemplate : '{content} {icon}', // new in v2.7. Needed to add the bootstrap icon!  
  33.  widthFixed: true,  
  34.  widgets: ['zebra', 'filter']  
  35.  })  
  36.   
  37. // initialize the pager plugin  
  38.  // ****************************  
  39.  .tablesorterPager(pagerOptions);  
  40.   
  41. });  
  42.  });  
  43.  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);  
  44. })();  
  45.   
  46. function CustomDemoItem(ctx)  
  47. {  
  48.  var html = "";  
  49.  html = "<tr>";  
  50.  html += "<td>" + ctx.CurrentItem.Title + "</td>";  
  51.  html += "<td>" + ctx.CurrentItem.Name + "</td>";  
  52.  html += "<td>" + ctx.CurrentItem.Sex + "</td>";  
  53.  html += "<td>" + ctx.CurrentItem.English + "</td>";  
  54.  html += "<td>" + ctx.CurrentItem.Hindi + "</td>";  
  55.  html += "<td>" + ctx.CurrentItem.Calculus + "</td>";  
  56.  html += "<td>" + ctx.CurrentItem.Geometry + "</td>";  
  57.  html += "</tr>";  
  58.  return html;  
  59. } 
I uploaded this JavaScript link file in the master page gallery with properties as shown in the following image.



I added references for the following CSS and JavaScript files in the page layout. I added that in the page layout but you can add it to the master page depending on your requirements.
  1. <!-- jQuery file -->  
  2. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>  
  3. <!-- css stylesheet refrences -->  
  4. <link href="/sites/Demo/SiteAssets/css/theme.blue.css" rel="stylesheet" type="text/css" />  
  5. <link href="/sites/Demo/SiteAssets/addons/pager/jquery.tablesorter.pager.css" rel="stylesheet" type="text/css" />  
  6. <!-- Tablesorter js -->  
  7. <script type="text/javascript" src="/sites/Demo/SiteAssets/js/jquery.tablesorter.js"></script>   
  8. <script type="text/javascript" src="/sites/Demo/SiteAssets/addons/pager/jquery.tablesorter.pager.js"></script>  
  9. <script type="text/javascript" src="/sites/Demo/SiteAssets/js/jquery.tablesorter.widgets.js"></script> 
Edit the page to add a list view web part to the page and edit the XSLTListView web part to set the newly created JavaScript link file.



Set the value as in the following.
  1. ~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.

 
 
Note
 
The complete contribution, development and license rights remain with the team that have developed the tablesorter plugin. This article is just to show the integration of SharePoint 2013 JSLink with the jQuery plugin.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs