Change SharePoint list view to JQuery Datatable Using JSLink

0
977
views

 

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 able to 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 Getting started to implement jQuery datatable

Open sharepoint site

Create a sharepoint custom list with some data

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

Next step Upload all the CSS and Javascript plugins for build  a datatable

Download here:  Datatable

Upload all the CSS and Javascript files into site assets library

Open the customize.js and start build code

Links the CSS File next

Add CSS and Javascript

Inside a javascript file you can call the CSS like this

 //Declare my custom css for design HTML

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

Create a function for overrides the item template

Inside the function declare necessary JQuery Snippets

(window.jQuery || document.write(‘<script src=”https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/datatable/js/jquery-1.12.4.js”><\/script>’));

(window.jQuery || document.write(‘<script src=”https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/datatable/js/jquery.dataTables.min.js”><\/script>’));

(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.     var overrideCtx = {};       // Create a variable for override context
  6.     overrideCtx.Templates = {}   // Get the templates of the list
  7.      //Declare the template header with HTML Tags
  8.     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>”;
  9. // Get the Item data from context
  10.     overrideCtx.Templates.Item = dataTemplate;
  11. //Declare the template footer with HTML tags
  12.     overrideCtx.Templates.Footer = “</tbody></table>”;
  13. // Onpostrender event fires after the DOM is loaded
  14.     overrideCtx.OnPostRender = dataTableOnPostRender;
  15. //Register the template overrides
  16. SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
  17. })();

 

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

// This function provides the rendering logic

  1.     function dataTemplate(ctx) {
  2.           // Return whole item html
  3.     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>”;
  4. }

 

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

Example Variable Declaration:

  1. Var titleVal = ctx.CurrentItem.Title;

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

Next step am call 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. var cssId = ‘myCss1’;
  14. if (!document.getElementById(cssId)) {
  15.     var head = document.getElementsByTagName(‘head’)[0];
  16.     var link = document.createElement(‘link’);
  17.     link.id = cssId;
  18.     link.rel = ‘stylesheet’;
  19.     link.type = ‘text/css’;
  20.     link.href = ‘https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/datatable/css/dataTables.jqueryui.min.css’;
  21.     link.media = ‘all’;
  22.     head.appendChild(link);
  23. }
  24. (function () {
  25.     (window.jQuery || document.write(‘<script src=”https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/datatable/js/jquery-1.12.4.js”><\/script>’));
  26.     (window.jQuery || document.write(‘<script src=”https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/datatable/js/jquery.dataTables.min.js”><\/script>’));
  27.     (window.jQuery || document.write(‘<script src=”https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/datatable/js/dataTables.jqueryui.min.js”><\/script>’));
  28.      var overrideCtx = {};
  29.      overrideCtx.Templates = {}
  30.      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>”;
  31.      overrideCtx.Templates.Item = dataTemplate;
  32.      overrideCtx.Templates.Footer = “</tbody></table>”;
  33.      overrideCtx.OnPostRender = dataTableOnPostRender;
  34.     // This line of code tell TemplateManager that we want to change all HTML for item row render
  35.     SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
  36. })();
  37. // This function provides the rendering logic
  38.     function dataTemplate(ctx) {
  39.           // Return whole item html
  40.     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>”;
  41. }
  42. function dataTableOnPostRender() {
  43.     $(document).ready(function () {
  44.         $(‘#example’).DataTable();
  45.     });
  46. }

 

Now let’s go to sharepoint -> Navigate to product list

Click on Edit page – > Edit web part

Expand the “Miscellaneous” tree

You are now able to see the JSLink  Field

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

Now let’s add more data into it

Let’s Check pagination also works cool

Now check the filter from “ metadata navigation “

Search for  “Apple” from make/model

Works awesome

Now search inside the datatable “Sony ”

Download Code Here:  Datatable JSLink

Conclusion:

Sharepoint developer you can also customize sharepoint like this also it’s one of the coolest OOTB feature.  it changes  the overall look and feel of sharepoint list components

 

Happy sharepointing!…

 

 

 

 

Please follow and like us:
0

LEAVE A REPLY

Please enter your comment!
Please enter your name here