Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 177
  • Last Modified:

DataTables - table not rendering. No error either

Hi All,

I have a SharePoint list and I am trying to convert my list to a datatable but nothing happens.  Here's my site and  code:
http://isogunro.com/demos/PF/_layouts/15/start.aspx#/SitePages/Home.aspx

FileName: JSOMPrioritize.html
<script type="text/javascript" src="http://isogunro.com/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="http://isogunro.com/_layouts/15/sp.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.css">  
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="http://isogunro.com/demos/PF/Webpart/Prioritize/JSOMPrioritize.js"></script>

Open in new window


FileName: JSOMPrioritize.js
$(function() {
	retrieveListItems();
});

function retrieveListItems() {
	var clientContext = new SP.ClientContext();
	var oList = clientContext.get_web().get_lists().getByTitle('ParkFundingForm');
	
/*
CAML (Collaborative Application Markup Language) Query is a query language used in SharePoint
to define the query for list items. You can specify which items to return based on criteria much like a SQL
query, although they look nothing alike. In this example, we simply create an empty query using the new
SP.CamlQuery() method. When you query a list, you must provide a CAML query, even if no parameters are
defined. If you pass an empty query, as in this example, you are in effect asking for all items to be returned.
In practice, this is not a great idea, since a lot of lists contain hundreds or thousands of items. After we’ve
created the query, we pass it to the oList.getItems() method to perform the query. Just as in the other
examples, we use a global variable called collListItems using the this keyword. Finally, we “load” the
query and execute it.

http://msdn.microsoft.com/en-us/library/ms467521(v=office.15).aspx.
*/	
	var camlQuery = new SP.CamlQuery();
		/*camlQuery.set_viewXml(
			'<ViewFields>' +
     '<FieldRef Name=\'Author\' />' +
      '<FieldRef Name=\'Description\' />' +
      '<FieldRef Name=\'Status\' />' +
   '</ViewFields>' +
   '<Where>' +
      '<Eq>' +
         '<FieldRef Name=\'Status\' />'+
        ' <Value Type=\'Choice\'>On-time</Value>'+
    '  </Eq>'+
  ' </Where>');*/
  
	this.collListItem = oList.getItems(camlQuery);
	
	clientContext.load(collListItem);
	
    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded),
        Function.createDelegate(this, this.onQueryFailed)
        );
}

var htmlTbl = "<table id='prioritize' class='display' cellspacing='0' width='100%'>";
	htmlTbl += "<thead><th>Priority Number</th><th>Title</th><th>Project Name</th><th>Project Number</th></thead>";
	htmlTbl += "<tbody>";

var items=[];

function onQuerySucceeded(sender, args) {
	var listItemInfo = '';
	var listItemEnumerator = collListItem.getEnumerator();
	
	while (listItemEnumerator.moveNext()) {
		var oListItem = listItemEnumerator.get_current();
		
		htmlTbl += "<tr><td>"+oListItem.get_item('PriorityNumber')+"</td><td>"+oListItem.get_item('Title')+"</td><td>"+oListItem.get_item('ProjectName')+"</td><td>"+oListItem.get_item('ProjectNumber')+"</td></tr>";
		//listItemInfo += '<strong>Title: </strong> ' + oListItem.get_item('Description') + '<br />'+oListItem.get_item('Status') + '<br />'+oListItem.get_item('ID');
		//items.push([oListItem.get_item('ID'),oListItem.get_item('PriorityNumber')]);
		
		//alert(items);
	}
	
	htmlTbl += "</tbody></table>";
	//alert(htmlTbl);
	
		//$("#divListItems").html(listItemInfo);
}

function onQueryFailed(sender, args) {
	$("#divListItems").html(listItemInfo);
}

function onQueryFailed(sender, args) {
	alert('Request failed. '+args.get_message() + '\n' + args.get_stackTrace());
}

$(document).ready(function() {
    $('#prioritize').DataTable();
});

Open in new window


Thanks for any help.
0
Isaac
Asked:
Isaac
  • 3
  • 2
1 Solution
 
KarenAnalyst programmerCommented:
what do you mean by, "nothing happens"? does the table show at all?
0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
No the table does not show
0
 
KarenAnalyst programmerCommented:
Well, you have a variable called htmlTbl containing some mark-up, but you do nothing with it.
You need to add it to the page.
0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
Oh my....thanks!

Any idea why it's not rendering as a datatable?
I'll still give you the points and open it up as another question.
0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now