I am using Handlebars to display my SharePoint list into a table, which works. But when I try to turn it into a dataTable, it does not transform into a dataTable. I was able to do it in jsFiddle and it works. But for some odd reason, it doesn't work in SharePoint. It worked very briefly yesterday but then stopped. Am I missing something. I don't get an error either so it's hard to debug the issue. Thanks for any help you can provide.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
<html xmlns="http://www.w3.org/1999/xhtml">

<script type="text/javascript" 
<!-- Handlebar Js Template Starts Here --> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.min.js"></script>   
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://understandsp.com/spdev/SiteAssets/siteAdmins.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/jquery.dataTables.css" />
<script id="siteadmin-template" type="text/x-handlebars-template">

<table border=1 width="100%" id="example" class="display"> 
    <th>First Name</th>
    <th>Last Name</th>

       <th>{#if Picture}}<img src="{{formatHtml Picture}}" width="50" 
    <th style='color:blue'><a href="mailto:{{Title}}">{{Title}}</a></th>
    <th>{{#if Phone}}{{Phone}}{{else}}N/A{{/if}}</th>

<div id="displaySiteAdmin"></div>



 Handlebars.registerHelper("formatHtml", function(property) {
//return new Handlebars.SafeString(property);
return _spPageContextInfo.webAbsoluteUrl+property;

 $(document).ready(function() {

 } );

 //Loading items for handlebars to use
 function loadSPItems() {
  var endPointUrl = _spPageContextInfo.webAbsoluteUrl +      "/_api/web/lists/getbyTitle('siteAdmins')/items";//?$select=hbCommentBy,CommentDate,Comment0,ResponseRequired,ResponseDate,Response0&$filter=Title eq '"+projNum+"'";//,ProjectNumber,ApprovalStatus,ProjectExecutionStatus”;

 var headers = { 
"accept": "application/json;odata=verbose" 

url: endPointUrl, 
type: "GET", 
headers: headers, 
success: function (data) {
    //1.Get the template source from the DOM
    //returns final mark up with interpolation
    var source = $("#siteadmin-template").html(); 

    //2. Compile the template source into a template *function*
    var profileTemplate = Handlebars.compile(source);   

    //3. call our template function, passing in data to render the template      with
    var renderTemplate = profileTemplate(data.d); 

    //4. Add our rendered HTML to the page
error: function (err) { 
//alert("Error Occured:" + JSON.stringify(err)); 



Here's an image of my siteAdmins list with the columns enter image description here

  • Can you please let us know the structure of your "siteAdmins" list – Sagar Jan 17 '18 at 7:24
  • Ok. sorry. just added it to the original question. – JustMe Jan 17 '18 at 19:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.