1

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.

siteAdmin.html

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

<head>
<script type="text/javascript" 
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<!-- 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"> 
<thead>
<tr>
    <th>Picture</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email</th>
    <th>Phone</th>
</tr>
</thead>

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

</table>
</script>
<div id="displaySiteAdmin"></div>
</head>


</html>

siteAdmin.js

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

 $(document).ready(function() {
$('#example').DataTable();
loadSPItems();

 } );

 //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" 
 }

 jQuery.ajax({ 
url: endPointUrl, 
type: "GET", 
headers: headers, 
success: function (data) {
console.dir(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
    $("#displaySiteAdmin").html(renderTemplate);
},
error: function (err) { 
//alert("Error Occured:" + JSON.stringify(err)); 
//console.log(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.