Post
Ask Question

Change SharePoint ListView To jQuery Datatable Using JSLink

Introduction

JSLink is JavaScript link [ CSR - Client-side rendering]. This feature was introduced in SharePoint 2013 for customizing SharePoint list forms Newfrom, displayform, editform.

Using this feature, you can change the overall look and feel of the SharePoint list. It works well to customize the SharePoint components using OOTB (Out Of the Box).

Let’s get started to implement jQuery datatable.

Open SharePoint site

Create a SharePoint custom list with some data.
JQuery

Open SharePoint Designer -> Navigate to Site Assets -> Create a file customize.js.

JQuery

Next, upload all the CSS and JavaScript plugins for building a datatable.

Download here - Datatable

Upload all the CSS and JavaScript files into Site Assets library.

JQuery

Open the customize.js and start building code.

Add CSS and JavaScript

Inside a JavaScript file, you can call the CSS like this.

  1. /Declare my custom css for design HTML  
  2. var cssId = 'myCss';  
  3. if (!document.getElementById(cssId)) {  
  4.     var head = document.getElementsByTagName('head')[0];  
  5.     var link = document.createElement('link');  
  6.     link.id = cssId;  
  7.     link.rel = 'stylesheet';  
  8.     link.type = 'text/css';  
  9.     link.href = 'https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/datatable/css/jquery-ui.css';  
  10.     link.media = 'all';  
  11.     head.appendChild(link);  
  12. }  
  13.   
  14. var cssId = 'myCss1';  
  15. if (!document.getElementById(cssId)) {  
  16.     var head = document.getElementsByTagName('head')[0];  
  17.     var link = document.createElement('link');  
  18.     link.id = cssId;  
  19.     link.rel = 'stylesheet';  
  20.     link.type = 'text/css';  
  21.     link.href = 'https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/datatable/css/dataTables.jqueryui.min.css';  
  22.     link.media = 'all';  
  23.     head.appendChild(link);  
  24. }  

Create a function for overriding the item template. Inside the function, declare necessary jQuery Snippets.

  1. (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/datatable/js/jquery-1.12.4.js"><\/script>'));  
  2.     (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/datatable/js/jquery.dataTables.min.js"><\/script>'));  
  3.     (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/datatable/js/dataTables.jqueryui.min.js"><\/script>'));  

HTML Code

  1. <table id="example" class="display" cellspacing="0" width="100%">  
  2.         <thead>  
  3.             <tr>  
  4.                 <th>Name</th>  
  5.                 <th>Position</th>  
  6.                 <th>Office</th>  
  7.                 <th>Age</th>  
  8.                 <th>Start date</th>  
  9.                 <th>Salary</th>  
  10.             </tr>  
  11.         </thead>  
  12.         <tfoot>  
  13.             <tr>  
  14.                 <th>Name</th>  
  15.                 <th>Position</th>  
  16.                 <th>Office</th>  
  17.                 <th>Age</th>  
  18.                 <th>Start date</th>  
  19.                 <th>Salary</th>  
  20.             </tr>  
  21.         </tfoot>  
  22.         <tbody>  
  23.             <tr>  
  24.                 <td>Tiger Nixon</td>  
  25.                 <td>System Architect</td>  
  26.                 <td>Edinburgh</td>  
  27.                 <td>61</td>  
  28.                 <td>2011/04/25</td>  
  29.                 <td>$320,800</td>  
  30.             </tr>  
  31.             <tr>  
  32.                 <td>Garrett Winters</td>  
  33.                 <td>Accountant</td>  
  34.                 <td>Tokyo</td>  
  35.                 <td>63</td>  
  36.                 <td>2011/07/25</td>  
  37.                 <td>$170,750</td>  
  38.             </tr>  
  39.     </tbody>  
  40.     </table>  

Now, override the default list template.

  1. (function () {  
  2.     (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/datatable/js/jquery-1.12.4.js"><\/script>'));  
  3.     (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/datatable/js/jquery.dataTables.min.js"><\/script>'));  
  4.     (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/datatable/js/dataTables.jqueryui.min.js"><\/script>'));  
  5.   
  6.   
  7.     var overrideCtx = {};       // Create a variable for override context  
  8.     overrideCtx.Templates = {}   // Get the templates of the list  
  9.      //Declare the template header with HTML Tags  
  10.     overrideCtx.Templates.Header = " <table id='example' class='display' cellspacing='0' width='100%'><thead><tr><th>Product</th><th>Description</th><th>Quantity</th><th>Make/Model</th><th>Price</th></tr></thead><tfoot><tr><th>Product</th><th>Description</th><th>Quantity</th><th>Make/Model</th><th>Price</th></tr></tfoot><tbody>";                     
  11.   
  12. // Get the Item data from context    
  13.     overrideCtx.Templates.Item = dataTemplate;  
  14.   
  15. //Declare the template footer with HTML tags  
  16.     overrideCtx.Templates.Footer = "</tbody></table>";  
  17.   
  18. // Onpostrender event fires after the DOM is loaded  
  19.     overrideCtx.OnPostRender = dataTableOnPostRender;  
  20.   
  21. //Register the template overrides  
  22.   
  23.     SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);  
  24. })();  

Now, let’s create a “DataTemplate” function to render the table <tbody></tbody>

  1. // This function provides the rendering logic   
  2.     function dataTemplate(ctx) {   
  3.           // Return whole item html   
  4.     return "<tr><td>"+ ctx.CurrentItem.ProductName +"</td><td>"+ ctx.CurrentItem.ProductDescription +"</td><td>"+ ctx.CurrentItem.Quantity +"</td><td>"+ ctx.CurrentItem.Make_x002f_Model+"</td><td>"+ ctx.CurrentItem.Price+"</td></tr>";   
  5. }  

You can fetch the data from context for example you need to get the data from “Title” field.

Example Variable Declaration

Var titleVal = ctx.CurrentItem.Title;

Also, you can directly pass the context value into the HTML it works.

Next , I have called the jQuery datatable function into OnPostrender.

  1. function dataTableOnPostRender() {  
  2.     $(document).ready(function () {  
  3.         $('#example').DataTable();  
  4.     });  
  5. }    

Full Code

  1. //Declare my custom css for design HTML  
  2. var cssId = 'myCss';  
  3. if (!document.getElementById(cssId)) {  
  4.     var head = document.getElementsByTagName('head')[0];  
  5.     var link = document.createElement('link');  
  6.     link.id = cssId;  
  7.     link.rel = 'stylesheet';  
  8.     link.type = 'text/css';  
  9.     link.href = 'https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/datatable/css/jquery-ui.css';  
  10.     link.media = 'all';  
  11.     head.appendChild(link);  
  12. }  
  13.   
  14. var cssId = 'myCss1';  
  15. if (!document.getElementById(cssId)) {  
  16.     var head = document.getElementsByTagName('head')[0];  
  17.     var link = document.createElement('link');  
  18.     link.id = cssId;  
  19.     link.rel = 'stylesheet';  
  20.     link.type = 'text/css';  
  21.     link.href = 'https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/datatable/css/dataTables.jqueryui.min.css';  
  22.     link.media = 'all';  
  23.     head.appendChild(link);  
  24. }  
  25.   
  26.   
  27. (function () {  
  28.     (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/datatable/js/jquery-1.12.4.js"><\/script>'));  
  29.     (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/datatable/js/jquery.dataTables.min.js"><\/script>'));  
  30.     (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/datatable/js/dataTables.jqueryui.min.js"><\/script>'));  
  31.   
  32.   
  33.      var overrideCtx = {};  
  34.      overrideCtx.Templates = {}  
  35.      overrideCtx.Templates.Header = " <table id='example' class='display' cellspacing='0' width='100%'><thead><tr><th>Product</th><th>Description</th><th>Quantity</th><th>Make/Model</th><th>Price</th></tr></thead><tfoot><tr><th>Product</th><th>Description</th><th>Quantity</th><th>Make/Model</th><th>Price</th></tr></tfoot><tbody>";                     
  36.      overrideCtx.Templates.Item = dataTemplate;       
  37.      overrideCtx.Templates.Footer = "</tbody></table>";   
  38.      overrideCtx.OnPostRender = dataTableOnPostRender;          
  39.   
  40.     // This line of code tell TemplateManager that we want to change all HTML for item row render   
  41.   
  42.     SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);  
  43.   
  44. })();  
  45. // This function provides the rendering logic   
  46.     function dataTemplate(ctx) {   
  47.           // Return whole item html   
  48.     return "<tr><td>"+ ctx.CurrentItem.ProductName +"</td><td>"+ ctx.CurrentItem.ProductDescription +"</td><td>"+ ctx.CurrentItem.Quantity +"</td><td>"+ ctx.CurrentItem.Make_x002f_Model+"</td><td>"+ ctx.CurrentItem.Price+"</td></tr>";   
  49. }  
  50.   
  51. function dataTableOnPostRender() {  
  52.     $(document).ready(function () {  
  53.         $('#example').DataTable();  
  54.     });  
  55. }     

Now, let’s go to SharePoint and navigate to Products list.

JQuery

Click on Edit page - > Edit web part.
JQuery

Expand the “Miscellaneous” tree. You are now able to see the JSLink Field.


JQuery

Note: /Sites/deve/siteAssets/jslink/sustomize.js it does not work. You pass it like below url

URL: ~site/SiteAssets/jslink/customize.js

Click OK.

JQuery

JQuery

Now, let’s add more data into it.

JQuery

Let’s check pagination -- that also works well.

JQuery

Now, check the filter from “ metadata navigation". Search for “Apple” from make/model.

JQuery

Works awesome!

Now, search inside the datatable “Sony”.

JQuery

Conclusion

You can also customize SharePoint like this. It’s one of the coolest OOTB features. It changes the overall look and feel of SharePoint list components.

Happy SharePointing!...


Similar Articles