Solved

DataTables - table not rendering.  No error either

Posted on 2016-10-05
5
57 Views
Last Modified: 2016-10-05
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
Comment
Question by:Isaac
  • 3
  • 2
5 Comments
 
LVL 9

Expert Comment

by:Karen
ID: 41830934
what do you mean by, "nothing happens"? does the table show at all?
0
 
LVL 5

Author Comment

by:Isaac
ID: 41830936
No the table does not show
0
 
LVL 9

Accepted Solution

by:
Karen earned 500 total points
ID: 41830950
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
 
LVL 5

Author Comment

by:Isaac
ID: 41830976
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
 
LVL 5

Author Closing Comment

by:Isaac
ID: 41830977
Thanks!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Note:  There are two main ways to deploy InfoPath forms:  Server-side and directly through the SharePoint site.  Deploying a server-side InfoPath form means the form is approved by the Administrator, thus allowing greater functionality in the form. …
Pimping Sharepoint 2007 without Server-Side Code Part 1 One of my biggest frustrations with Sharepoint 2007 in the corporate world is that while good-intentioned managers lock down the more interesting capabilities of Sharepoint programming in…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now